fix: Add OCI icon (#583)

Signed-off-by: Keith Chong <kykchong@redhat.com>

.dockerignore

@@ -1,3 +0,0 @@
-node_modules
-.git
-Dockerfile

.eslintrc.json

@@ -0,0 +1,31 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint", "react"],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-non-null-assertion": "off"
+  },
+  "overrides": [
+    {
+      "files": "./stories/*.tsx",
+      "rules": {
+        "react/display-name": "off",
+        "@typescript-eslint/no-unused-vars": "off"
+      }
+    }
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.github/dependabot.yml

@@ -0,0 +1,30 @@
+version: 2
+updates:
+  # prod dependencies
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+      day: "saturday"
+    # ignore all non-security updates: https://docs.github.com/en/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file#open-pull-requests-limit
+    open-pull-requests-limit: 0
+    labels:
+      - type/dependencies
+      - javascript
+    commit-message:
+      prefix: chore(deps)
+      prefix-development: chore(deps-dev)
+
+  # build / CI dependencies
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+      day: "saturday"
+    # ignore all non-security updates: https://docs.github.com/en/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file#open-pull-requests-limit
+    open-pull-requests-limit: 0
+    labels:
+      - type/dependencies
+      - github_actions
+    commit-message:
+      prefix: chore(deps)

.github/workflows/build-docs.yml

@@ -0,0 +1,15 @@
+name: Build Storybook Docs v2
+
+on:
+  push:
+
+jobs:
+  build-docs:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+      - run: yarn install
+      - run: yarn build-v2

.github/workflows/build-v1.yml

@@ -0,0 +1,22 @@
+name: Build v1
+
+on:
+  push:
+  pull_request:
+    branches:
+      - "master"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+      - run: yarn install
+      - run: yarn deduplicate
+      - run: yarn build
+      - run: yarn lint
+      - run: yarn tsc -p tsconfig.json
+      - run: yarn test --ci --runInBand

.github/workflows/dependabot-reviewer.yml

@@ -0,0 +1,28 @@
+# https://docs.github.com/en/code-security/dependabot/working-with-dependabot/automating-dependabot-with-github-actions
+name: Approve and enable auto-merge for dependabot
+on: pull_request
+
+permissions:
+  pull-requests: write
+  contents: write
+
+jobs:
+  review:
+    runs-on: ubuntu-latest
+    if: ${{ github.actor == 'dependabot[bot]' }}
+    steps:
+      - name: Dependabot metadata
+        id: metadata
+        uses: dependabot/fetch-metadata@v1.6.0
+        with:
+          github-token: "${{ secrets.GITHUB_TOKEN }}"
+      - name: Approve PR
+        run: gh pr review --approve "$PR_URL"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+      - name: Enable auto-merge for Dependabot PRs
+        run: gh pr merge --auto --squash "$PR_URL"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.github/workflows/npm-publish-v1.yml

@@ -0,0 +1,18 @@
+name: Release NPM package v1
+
+on:
+  push:
+    tags:
+      - v1.*
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.github/workflows/npm-publish.yml

@@ -0,0 +1,22 @@
+name: Release NPM package v2
+
+on:
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: Git tag to build release from
+        required: true
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.tag }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+      - run: cd v2 && npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.github/workflows/stale.yml

@@ -0,0 +1,41 @@
+# https://github.com/actions/stale
+name: Mark stale issues and pull requests
+
+on:
+  schedule:
+    - cron: '0 2 * * *' # once a day at 2am
+
+permissions:
+  contents: read
+
+jobs:
+  stale:
+    permissions:
+      issues: write # for commenting on an issue and editing labels
+      pull-requests: write # for commenting on a PR and editing labels
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@28ca1036281a5e5922ead5184a1bbf96e5fc984e # v9.0.0
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          # timing
+          days-before-stale: 14 # 2 weeks of inactivity
+          days-before-close: 14 # 2 more weeks of inactivity
+          # labels to watch for, add, and remove
+          only-labels: 'problem/more information needed' # only mark issues/PRs as stale if they have this label
+          labels-to-remove-when-unstale: 'problem/more information needed' # remove label when unstale -- should be manually added back if information is insufficient
+          stale-issue-label: 'problem/stale'
+          stale-pr-label: 'problem/stale'
+          # automated messages to issue/PR authors
+          stale-issue-message: >
+            This issue has been automatically marked as stale because it has not had recent activity and needs more information.
+            It will be closed if no further activity occurs.
+          stale-pr-message: >
+            This PR has been automatically marked as stale because it has not had recent activity and needs further changes.
+            It will be closed if no further activity occurs.
+          close-issue-message: >
+            This issue has been closed due to inactivity and lack of information.
+            If you still encounter this issue, please add the requested information and re-open.
+          close-pr-message:
+            This PR has been closed due to inactivity and lack of changes.
+            If you would like to still work on this PR, please address the review comments and re-open.

.gitignore

@@ -2,4 +2,9 @@ node_modules
 dist
 bundle
 .vscode
-
+.idea
+*.log
+coverage/
+.DS_STORE
+docs/
+v2/storybook-static/

.jshintrc

@@ -1,3 +0,0 @@
-{
-    "esversion": 6
-}

.npmignore

@@ -0,0 +1,2 @@
+v2
+node_modules

.nvmrc

@@ -1 +1 @@
-v9.4.0
+v20

.storybook/config.js

@@ -1,9 +0,0 @@
-import { configure } from '@storybook/react';
-
-// automatically import all files ending in *.stories.js
-const req = require.context('../stories', true, /.stories.tsx$/);
-function loadStories() {
-  req.keys().forEach((filename) => req(filename));
-}
-
-configure(loadStories, module);

.storybook/main.js

@@ -0,0 +1,21 @@
+const path = require('path');
+
+module.exports = {
+    stories: ['../stories/*.stories.tsx'],
+    addons: ['@storybook/addon-essentials'],
+    typescript: {
+        check: false, // typecheck separately
+        reactDocgen: false, // substantially improves performance: https://github.com/storybookjs/storybook/issues/22164#issuecomment-1603627308
+    },
+    webpackFinal: async (config, {configType}) => {
+        config.devtool = false; // perf per: https://github.com/storybookjs/storybook/issues/19736#issuecomment-1478103817
+        config.module.rules.push({
+            test: /\.scss$/,
+            exclude: /node_modules/,
+            include: path.resolve(__dirname, '../'),
+            sideEffects: true, // get side-effect styles to load per: https://github.com/storybookjs/storybook/issues/4690#issuecomment-435909433
+            loader: 'style-loader!raw-loader!sass-loader'
+        });
+        return config;
+    },
+};

.storybook/preview.js

@@ -0,0 +1 @@
+// import '../src/styles/main.scss'; -- this seems to not work and also makes the Storybook freeze for multiple minutes 😕

.storybook/webpack.config.js

@@ -1,26 +0,0 @@
-const path = require('path');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-
-module.exports = ({config}) => {
-    config.module.rules = [{
-        test: /\.(ts|tsx)$/,
-        loader: `ts-loader?configFile=${path.resolve('./stories/tsconfig.json')}`
-    }, {
-        test: /\.scss$/,
-        exclude: /node_modules/,
-        loader: 'style-loader!raw-loader!sass-loader'
-    }, {
-        test: /\.css$/,
-        loader: 'style-loader!raw-loader'
-    }];
-    config.resolve = {
-        extensions: ['.ts', '.tsx', '.js', '.json']
-    };
-    config.plugins.push(new CopyWebpackPlugin([{
-        from: 'src/assets', to: 'assets'
-    }, {
-        from: 'node_modules/@fortawesome/fontawesome-free/webfonts', to: 'assets/fonts'
-    }]));
-
-    return config;
-};

CONTRIBUTING.md

@@ -1,6 +0,0 @@
-
-Use the storybook to test components:
-
-~~~
-yarn storybook
-~~~

Dockerfile

@@ -1,21 +0,0 @@
-FROM node:11.15.0 as build
-
-WORKDIR /src
-ADD ["package.json", "yarn.lock", "./"]
-
-RUN yarn install
-
-ADD [".", "."]
-
-ARG ARGO_VERSION=latest
-ENV ARGO_VERSION=$ARGO_VERSION
-RUN NODE_ENV='production' yarn build && yarn cache clean && yarn install --production
-
-FROM node:11.15.0-alpine
-
-COPY  --from=build ./src/dist /app
-COPY  --from=build ./src/node_modules /app/node_modules
-WORKDIR /app
-
-EXPOSE 8001
-CMD node api/api/main.js --uiDist /app/app --inCluster ${IN_CLUSTER} --namespace ${ARGO_NAMESPACE} --force-namespace-isolation ${FORCE_NAMESPACE_ISOLATION} --instanceId ${INSTANCE_ID:-''} --enableWebConsole ${ENABLE_WEB_CONSOLE:-'false'} --uiBaseHref ${BASE_HREF:-'/'} --ip ${IP:-'0.0.0.0'} --port ${PORT:-'8001'}

Procfile

@@ -1,2 +0,0 @@
-ui: yarn start:ui
-api: yarn start:api

README.md

@@ -1,19 +1,35 @@
-# Argo UI
+# Argo UI Components
 
-![Argo Image](https://github.com/argoproj/argo/blob/master/argo.png?raw=true)
+<img src="https://github.com/argoproj/argo-ui/blob/master/src/assets/images/logo.png?raw=true" alt="Argo Image" height="200px">
 
-A web-based UI for the Argo Workflow engine. 
+Set of React components used by [Argo Workflows](https://github.com/argoproj/argo-workflows), [Argo CD](https://github.com/argoproj/argo-cd), and [Argo Rollouts](https://github.com/argoproj/argo-rollouts).
 
-The UI has the following features:
-* View live Argo Workflows running in the cluster
-* View completed Argo Workflows
-* View container logs
+## Build & Run
 
-Some Argo UI components ( such as Workflow DAG viewer, Workflow timeline etc ) are distributed in the [argo-ui](https://www.npmjs.com/package/argo-ui) NPM package.
+1. Install Toolset: [NodeJS](https://nodejs.org/en/download/) and [Yarn v1](https://classic.yarnpkg.com/en/docs)
+1. Install Dependencies: run `yarn install`
+1. Run: `yarn start` - starts the [Storybook v6](https://storybook.js.org/docs/6.5/get-started/install) dev server
 
-## Build, run, release
+## Local Development
 
-* Install [NodeJS](https://nodejs.org/en/download/) and [Yarn](https://yarnpkg.com)
-* Run: `yarn start` - starts API server and webpack dev UI server. API server uses current `kubectl` context to access workflow CRDs.
-* Build: `yarn build` - builds static resources into `./dist` directory.
-* Release: `IMAGE_NAMESPACE=argoproj IMAGE_TAG=latest DOCKER_PUSH=true yarn docker` - builds docker image and optionally push to docker registry.
+To test your changes locally against Argo CD or another Argo project, we recommend using [`yalc`](https://github.com/wclr/yalc).
+
+First, install `yalc`:
+
+```sh
+npm i -g yalc
+```
+
+Next, in your local `argo-ui` directory, run
+
+```sh
+yalc publish
+```
+
+Finally, in your local `argo-cd/ui` directory, run
+
+```sh
+yalc add argo-ui
+```
+
+Your local changes to the `argo-ui` package will now be seen by your local `argo-cd`.

jest.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  preset: 'ts-jest',
+  collectCoverage: true,
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}'
+  ],
+  "moduleNameMapper": {
+    "\\.(css|less|scss|sass)$": "identity-obj-proxy"
+  },
+  snapshotSerializers: ['enzyme-to-json/serializer'],
+  setupFilesAfterEnv: ['<rootDir>src/setupTests.ts'],
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.json'
+    }
+  }
+};

package.json

@@ -1,112 +1,98 @@
 {
     "name": "argo-ui",
     "version": "1.0.0",
-    "main": "./src/lib/index.ts",
-    "types": "./src/lib/index.ts",
-    "license": "MIT",
+    "main": "./src/index.ts",
+    "types": "./src/index.ts",
+    "license": "Apache-2.0",
     "files": [
-        "src"
+        "src",
+        "v2"
     ],
     "scripts": {
-        "docker": "./scripts/build_docker.sh",
-        "build": "yarn build:ui && yarn build:api",
-        "build:ui": "webpack --config ./src/app/webpack.config.js",
-        "build:api": "tsc -p ./src/api/tsconfig.json",
-        "build:storybook": "build-storybook -o ./dist/storybook",
-        "start": "nf start",
-        "start:ui": "webpack-dev-server --config ./src/app/webpack.config.js",
-        "start:api": "TS_NODE_PROJECT=./src/api/tsconfig.json nodemon --nolazy --inspect -r ts-node/register ./src/api/main.ts",
-        "lint": "yarn lint:ui && yarn lint:api",
-        "lint:ui": "tslint -p ./src/app",
-        "lint:api": "tslint -p ./src/api",
+        "lint": "eslint --ext .tsx .",
+        "deduplicate": "yarn-deduplicate -s fewer yarn.lock",
+        "test": "jest",
         "utils:icons": "rm -f src/assets/fonts/* && node ./scripts/icons/generator.js",
-        "test": "mocha --require ts-node/register ./src/app/**/*.spec.ts",
-        "storybook": "start-storybook -p 6006"
+        "start": "NODE_OPTIONS='--openssl-legacy-provider' start-storybook -p 6006",
+        "build": "NODE_OPTIONS='--openssl-legacy-provider' build-storybook -o ./dist/storybook",
+        "start-v2": "NODE_OPTIONS='--openssl-legacy-provider' start-storybook -c ./v2/.storybook -s ./v2/.storybook/images -p 6006",
+        "build-v2": "NODE_OPTIONS='--openssl-legacy-provider' build-storybook -o ./dist/storybook-v2 -c ./v2/.storybook"
     },
     "dependencies": {
-        "@fortawesome/fontawesome-free": "^5.8.1",
-        "@tippy.js/react": "^2.1.2",
-        "@types/react-form": "^2.16.1",
-        "@types/react-helmet": "^5.0.8",
-        "aws-sdk": "^2.188.0",
-        "body-parser": "^1.18.2",
-        "classnames": "^2.2.5",
-        "dagre": "^0.8.2",
-        "deep-equal": "^1.0.1",
-        "express": "^4.16.2",
-        "express-winston": "^3.0.0",
+        "@fortawesome/fontawesome-free": "^6.2.1",
+        "@tippy.js/react": "^3.1.1",
+        "classnames": "^2.2.6",
+        "core-js": "^3.32.1",
         "foundation-sites": "^6.4.3",
-        "history": "^4.7.2",
-        "json-stream": "^1.0.0",
-        "kubernetes-client": "3.17.1",
-        "moment": "^2.20.1",
-        "prop-types": "^15.6.0",
-        "react": "^16.8.3",
-        "react-dom": "^16.8.3",
-        "react-form": "2.16.0",
-        "react-helmet": "^5.2.0",
+        "history": "^4.10.1",
+        "prop-types": "^15.8.1",
+        "react-autocomplete": "1.8.1",
+        "react-form": "^2.16.0",
+        "react-helmet": "^6.1.0",
         "react-router-dom": "^4.2.2",
-        "react-toastify": "^5.0.1",
-        "rxjs": "^5.5.6",
-        "superagent": "^3.8.2",
-        "superagent-promise": "^1.1.0",
-        "ts-loader": "^6.0.4",
-        "typescript": "^2.8.3",
-        "util.promisify": "^1.0.0",
-        "webpack-cli": "^3.3.5",
-        "winston": "^3.1.0",
-        "ws": "^4.0.0",
-        "xterm": "2.4.0",
-        "yamljs": "^0.3.0",
-        "yargs": "^11.0.0"
+        "react-toastify": "9.0.3",
+        "rxjs": "^7.8.1",
+        "typescript": "^4.9.5",
+        "uuid": "^9.0.0",
+        "xterm": "^4.19.0",
+        "xterm-addon-fit": "^0.5.0"
+    },
+    "peerDependencies": {
+        "@types/react": "^16.8.5",
+        "react": "^16.9.3",
+        "react-dom": "^16.9.3"
     },
     "devDependencies": {
-        "@dump247/storybook-state": "^1.5.0",
-        "@storybook/addon-actions": "^5.1.9",
-        "@storybook/addon-links": "^5.1.9",
-        "@storybook/addons": "^5.1.9",
-        "@storybook/react": "^5.1.9",
-        "@types/aws-sdk": "^2.7.0",
-        "@types/chai": "^4.1.2",
-        "@types/classnames": "^2.2.3",
-        "@types/dagre": "^0.7.39",
+        "@babel/core": "^7.21.3",
+        "@storybook/addon-actions": "6.5.0-beta.1",
+        "@storybook/addon-controls": "6.5.0-beta.1",
+        "@storybook/addon-essentials": "6.5.0-beta.1",
+        "@storybook/addon-links": "6.5.0-beta.1",
+        "@storybook/addons": "6.5.0-beta.1",
+        "@storybook/react": "6.5.0-beta.1",
+        "@types/classnames": "^2.3.1",
         "@types/deep-equal": "^1.0.1",
-        "@types/history": "^4.6.2",
-        "@types/mocha": "^2.2.48",
-        "@types/prop-types": "^15.5.2",
+        "@types/enzyme": "^3.10.12",
+        "@types/enzyme-adapter-react-16": "^1.0.6",
+        "@types/history": "^4.7.8",
+        "@types/jest": "^26.0.15",
+        "@types/node": "^18.15.3",
+        "@types/prop-types": "^15.7.5",
         "@types/react": "^16.8.5",
-        "@types/react-dom": "^16.8.2",
-        "@types/react-router-dom": "^4.2.3",
-        "@types/storybook__addon-actions": "^3.0.2",
-        "@types/storybook__addon-links": "^3.3.0",
-        "@types/storybook__react": "^3.0.7",
-        "@types/superagent": "^3.5.7",
-        "@types/ws": "^4.0.0",
-        "@types/yamljs": "^0.2.30",
-        "babel-core": "^6.26.0",
-        "chai": "^4.1.2",
+        "@types/react-autocomplete": "^1.8.4",
+        "@types/react-dom": "^16.9.3",
+        "@types/react-form": "^2.16.1",
+        "@types/react-helmet": "^6.1.6",
+        "@types/react-router-dom": "^4.2.2",
+        "@types/uuid": "^9.0.3",
+        "@typescript-eslint/eslint-plugin": "^5.36.1",
+        "@typescript-eslint/parser": "^5.36.1",
+        "babel-loader": "^8.2.5",
         "copy-webpack-plugin": "^4.3.1",
-        "copyfiles": "^1.2.0",
-        "foreman": "^2.0.0",
-        "glob": "^7.1.2",
-        "html-webpack-plugin": "^3.2.0",
-        "jscs": "^3.0.7",
-        "mocha": "^5.0.0",
-        "node-sass": "^4.7.2",
-        "nodemon": "^1.14.11",
-        "raw-loader": "^0.5.1",
-        "react-hot-loader": "^3.1.3",
-        "sass-loader": "^6.0.6",
-        "source-map-loader": "^0.2.3",
-        "style-loader": "^0.20.1",
-        "ts-node": "^4.1.0",
-        "tslint": "^5.9.1",
-        "tslint-react": "^3.4.0",
+        "css-loader": "^3.6.0",
+        "enzyme": "^3.11.0",
+        "enzyme-adapter-react-16": "^1.15.7",
+        "enzyme-to-json": "^3.6.2",
+        "eslint": "^8.23.0",
+        "eslint-plugin-react": "^7.31.1",
+        "glob": "^8.0.3",
+        "identity-obj-proxy": "^3.0.0",
+        "jest": "^26.6.3",
+        "raw-loader": "^4.0.2",
+        "react": "^16.9.3",
+        "react-dom": "^16.9.3",
+        "sass": "^1.55.0",
+        "sass-loader": "^v10.1.0",
+        "storybook": "6.5.0-beta.1",
+        "style-loader": "^2.0.0",
+        "ts-jest": "^26.5.6",
+        "ts-node": "^10.9.1",
         "webfonts-generator": "^0.4.0",
-        "webpack": "^4.35.0",
-        "webpack-dev-server": "^3.7.2"
+        "webpack": "^4.46.0",
+        "yarn-deduplicate": "^6.0.2"
     },
     "resolutions": {
-        "@types/react": "16.8.5"
+        "@types/react": "^16.8.5",
+        "@types/node": "14.11.2"
     }
 }

scripts/build_docker.sh

@@ -1,16 +0,0 @@
-#!/bin/bash
-
-CURRENT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null && pwd )"
-GIT_COMMIT=`git rev-parse --short HEAD`
-VERSION=`cat ${CURRENT_DIR}/../VERSION`
-
-set -e
-
-TAG=${IMAGE_TAG:-"$VERSION-$GIT_COMMIT"}
-
-docker build --build-arg ARGO_VERSION=${TAG} -t ${IMAGE_NAMESPACE:-`whoami`}/argoui:${TAG} .
-
-if [ "$DOCKER_PUSH" == "true" ]
-then
-    docker push ${IMAGE_NAMESPACE:-`whoami`}/argoui:${TAG}
-fi

scripts/icons/generator.js

@@ -7,7 +7,7 @@ const fs = require('fs');
 const FONT_TYPES = ['svg', 'ttf', 'woff', 'eot'];
 
 webfontsGenerator({
-    files: glob.sync('src/app/shared/styles/icons/*.svg'),
+    files: glob.sync('src/styles/icons/*.svg'),
     dest: 'src/assets/fonts',
     fontName: 'argo-icon',
     types: FONT_TYPES,
@@ -22,7 +22,7 @@ webfontsGenerator({
         console.log('Fail!', error);
     } else {
         const scss = fs.readFileSync('src/assets/fonts/argo-icon.css', 'utf-8').replace(/url\(\"argo-icon/g, 'url\($argo-icon-fonts-root + \"argo-icon');
-        fs.writeFileSync('src/app/shared/styles/argo-icon.scss', scss);
+        fs.writeFileSync('src/styles/argo-icon.scss', scss);
         fs.unlinkSync('src/assets/fonts/argo-icon.css');
     }
 });

src/api/app.ts

@@ -1,235 +0,0 @@
-import * as aws from 'aws-sdk';
-import * as bodyParser from 'body-parser';
-import * as express from 'express';
-import * as expressWinston from 'express-winston';
-import * as fs from 'fs';
-import * as http from 'http';
-import * as JSONStream from 'json-stream';
-import * as Api from 'kubernetes-client';
-import * as path from 'path';
-import { Observable, Observer } from 'rxjs';
-import * as nodeStream from 'stream';
-import * as promisify from 'util.promisify';
-import * as winston from 'winston';
-
-import * as zlib from 'zlib';
-import * as models from '../models';
-import * as consoleProxy from './console-proxy';
-
-import { decodeBase64, reactifyStringStream, streamServerEvents } from './utils';
-
-const winstonTransport = new winston.transports.Console({
-    format: winston.format.combine(
-        winston.format.timestamp(),
-        winston.format.simple(),
-    ),
-});
-
-const logger = winston.createLogger({
-    transports: [winstonTransport],
-});
-
-function serve<T>(res: express.Response, action: () => Promise<T>) {
-    action().then((val) => res.send(val)).catch((err) => {
-        if (err instanceof Error) {
-            err = {...err, message: err.message};
-        }
-        res.status(500).send(err);
-        logger.error(err);
-    });
-}
-
-function fileToString(filePath: string): Promise<string> {
-    return new Promise<string>((resolve, reject) => {
-        fs.readFile(filePath, 'utf-8', (err, content) => {
-            if (err) {
-                reject(err);
-            } else {
-                resolve(content);
-            }
-        });
-    });
-}
-
-export function create(
-        uiDist: string,
-        uiBaseHref: string,
-        inCluster: boolean,
-        namespace: string,
-        forceNamespaceIsolation: boolean,
-        instanceId: string,
-        version,
-        group = 'argoproj.io') {
-    const config = Object.assign(
-        {}, inCluster ? Api.config.getInCluster() : Api.config.fromKubeconfig(), {namespace, promises: true });
-    const core = new Api.Core(config);
-    const crd = new Api.CustomResourceDefinitions(Object.assign(config, {version, group}));
-    crd.addResource('workflows');
-    const app = express();
-    app.use(bodyParser.json({type: () => true}));
-
-    app.use(expressWinston.logger({
-        transports: [winstonTransport],
-        meta: false,
-        msg: '{{res.statusCode}} {{req.method}} {{res.responseTime}}ms {{req.url}}',
-    }));
-
-    function getWorkflowLabelSelector(req) {
-        const labelSelector: string[] = [];
-        if (instanceId) {
-            labelSelector.push(`workflows.argoproj.io/controller-instanceid = ${instanceId}`);
-        }
-        if (req.query.phase) {
-            const phases = req.query.phase instanceof Array ? req.query.phase : [req.query.phase];
-            if (phases.length > 0) {
-                labelSelector.push(`workflows.argoproj.io/phase in (${phases.join(',')})`);
-            }
-        }
-        return labelSelector;
-    }
-
-    app.get('/api/workflows', (req, res) => serve(res, async () => {
-        const labelSelector = getWorkflowLabelSelector(req);
-
-        const workflowList = await (forceNamespaceIsolation ? crd.ns(namespace) : crd).workflows.get({
-            qs: { labelSelector: labelSelector.join(',') },
-        }) as models.WorkflowList;
-
-        workflowList.items.sort(models.compareWorkflows);
-        workflowList.items = await Promise.all(workflowList.items.map(deCompressNodes));
-        return workflowList;
-    }));
-
-    app.get('/api/workflows/:namespace/:name',
-        async (req, res) => serve(res, () => (forceNamespaceIsolation ? crd.ns(namespace) : crd.ns(req.params.namespace)).workflows.get(req.params.name).then((deCompressNodes))));
-
-    app.get('/api/workflows/live', async (req, res) => {
-        const ns = getNamespace(req);
-        let updatesSource = new Observable((observer: Observer<any>) => {
-            const labelSelector = getWorkflowLabelSelector(req);
-            let stream = (ns ? crd.ns(ns) : crd).workflows.getStream({ qs: { watch: true, labelSelector: labelSelector.join(',') } });
-            stream.on('end', () => observer.complete());
-            stream.on('error', (e) => observer.error(e));
-            stream.on('close', () => observer.complete());
-            stream = stream.pipe(new JSONStream());
-            stream.on('data', (data) => data && observer.next(data));
-        }).flatMap((change) => Observable.fromPromise(deCompressNodes(change.object).then((workflow) => ({...change, object: workflow}))));
-        if (ns) {
-            updatesSource = updatesSource.filter((change) => {
-                return change.object.metadata.namespace === ns;
-            });
-        }
-        if (req.query.name) {
-            updatesSource = updatesSource.filter((change) => change.object.metadata.name === req.query.name);
-        }
-        streamServerEvents(req, res, updatesSource, (item) => JSON.stringify(item));
-    });
-
-    function getNamespace(req: express.Request) {
-        return forceNamespaceIsolation ? namespace : (req.query.namespace || req.params.namespace);
-    }
-
-    function getWorkflow(ns: string, name: string): Promise<models.Workflow> {
-        return crd.ns(ns).workflows.get(name).then(deCompressNodes);
-    }
-
-    async function deCompressNodes(workFlow: models.Workflow): Promise<models.Workflow> {
-        if (workFlow.status.compressedNodes !== undefined && workFlow.status.compressedNodes !== '') {
-            const buffer = Buffer.from(workFlow.status.compressedNodes, 'base64');
-            const unCompressedBuffer = await promisify(zlib.unzip)(buffer);
-            workFlow.status.nodes = JSON.parse(unCompressedBuffer.toString());
-            delete workFlow.status.compressedNodes;
-            return workFlow;
-        } else {
-            return workFlow;
-        }
-    }
-
-    function loadNodeArtifact(wf: models.Workflow, nodeId: string, artifactName: string): Promise<{ data: Buffer, fileName: string }> {
-        return new Promise(async (resolve, reject) => {
-            const node = wf.status.nodes[nodeId];
-            const artifact = node.outputs.artifacts.find((item) => item.name === artifactName);
-            if (artifact.s3) {
-                try {
-                    const secretAccessKey = decodeBase64((await core.ns(
-                        wf.metadata.namespace).secrets.get(artifact.s3.secretKeySecret.name)).data[artifact.s3.secretKeySecret.key]).trim();
-                    const accessKeyId = decodeBase64((await core.ns(
-                        wf.metadata.namespace).secrets.get(artifact.s3.accessKeySecret.name)).data[artifact.s3.accessKeySecret.key]).trim();
-                    const s3 = new aws.S3({
-                        region: artifact.s3.region, secretAccessKey, accessKeyId, endpoint: `http://${artifact.s3.endpoint}`, s3ForcePathStyle: true, signatureVersion: 'v4' });
-                    s3.getObject({ Bucket: artifact.s3.bucket, Key: artifact.s3.key }, (err, data) => {
-                        if (err) {
-                            reject(err);
-                        } else {
-                            resolve({ data: data.Body as Buffer, fileName: path.basename(artifact.s3.key) });
-                        }
-                    });
-                } catch (e) {
-                    reject(e);
-                }
-            } else {
-                reject({ code: 'INTERNAL_ERROR', message: 'Artifact source is not supported' });
-            }
-        });
-    }
-
-    app.get('/api/workflows/:namespace/:name/artifacts/:nodeId/:artifactName', async (req, res) => {
-        try {
-            const wf = await getWorkflow(getNamespace(req), req.params.name);
-            const artifact = await loadNodeArtifact(wf, req.params.nodeId, req.params.artifactName);
-            const readStream = new nodeStream.PassThrough();
-            readStream.end(artifact.data);
-            res.set('Content-disposition', 'attachment; filename=' + artifact.fileName);
-            readStream.pipe(res);
-        } catch (err) {
-            res.status(500).send(err);
-            logger.error(err);
-        }
-    });
-
-    app.get('/api/logs/:namespace/:name/:nodeId/:container', async (req: express.Request, res: express.Response) => {
-        try {
-            const wf = await getWorkflow(getNamespace(req), req.params.name);
-            try {
-                await core.ns(wf.metadata.namespace).pods.get(req.params.nodeId);
-                const logsSource = reactifyStringStream(
-                    core.ns(wf.metadata.namespace).po(req.params.nodeId).log.getStream({ qs: { container: req.params.container, follow: true } }));
-                streamServerEvents(req, res, logsSource, (item) => item.toString());
-            } catch (e) {
-                if (e.code === 404) {
-                    // Try load logs from S3 if pod already deleted
-                    const artifact = await loadNodeArtifact(wf, req.params.nodeId, 'main-logs');
-                    streamServerEvents(req, res, Observable.from(artifact.data.toString('utf8').split('\n')), (line) => line);
-                } else {
-                    throw e;
-                }
-            }
-        } catch (e) {
-            logger.error(e);
-            res.send(e);
-        }
-    });
-
-    const serveIndex = (req: express.Request, res: express.Response) => {
-        fileToString(`${uiDist}/index.html`).then((content) => {
-            return content.replace(`<base href="/">`, `<base href="${uiBaseHref}">`);
-        })
-        .then((indexContent) => res.send(indexContent))
-        .catch((err) => res.send(err));
-    };
-
-    app.get('/index.html', serveIndex);
-    app.use(express.static(uiDist, {index: false}));
-    app.use(async (req: express.Request, res: express.Response, next: express.NextFunction) => {
-        if ((req.method === 'GET' || req.method === 'HEAD') && req.accepts('html')) {
-            serveIndex(req, res);
-        } else {
-            next();
-        }
-    });
-
-    const server = http.createServer(app);
-    consoleProxy.create(server, core);
-
-    return server;
-}

src/api/console-proxy.ts

@@ -1,64 +0,0 @@
-import * as http from 'http';
-import * as url from 'url';
-import * as WebSocket from 'ws';
-
-import * as utils from './utils';
-
-function safeCallback(callback) {
-    const self = this;
-    // tslint:disable-next-line:only-arrow-functions
-    return function() {
-        try {
-            return callback.apply(self, arguments);
-        } catch (e) {
-            // tslint:disable-next-line:no-console
-            console.error(e);
-        }
-    };
-}
-
-export function create(server: http.Server, core) {
-    const wss = new WebSocket.Server({server});
-
-    wss.on('connection', safeCallback((ws, req) => {
-        const location = url.parse(req.url, true);
-        const match = location
-            .path
-            .match(/\/api\/steps\/([^/]*)\/([^/]*)\/exec/);
-        if (match) {
-            const cmd = [location.query.cmd];
-            const [, ns, pod] = match;
-            const apiUri = url
-                .parse(core.url)
-                .host;
-            let uri = `wss://${apiUri}/api/v1/namespaces/${ns}/pods/${pod}/exec?stdout=1&stdin=1&stderr=1&tty=1&container=main`;
-            cmd.forEach((subCmd) => uri += `&command=${encodeURIComponent(subCmd as string)}`);
-
-            const kubeClient = new WebSocket(uri, 'base64.channel.k8s.io', {
-                headers: {
-                    Authorization: `Bearer ${core.requestOptions.auth.bearer}`,
-                },
-            });
-
-            kubeClient.on('message', safeCallback((data) => {
-                if (data[0].match(/^[0-3]$/)) {
-                    ws.send(utils.decodeBase64(data.slice(1)));
-                }
-            }));
-            kubeClient.on('close', safeCallback(() => {
-                ws.terminate();
-            }));
-            kubeClient.on('error', safeCallback((err) => {
-                ws.send(err.message);
-                ws.terminate();
-            }));
-
-            ws.on('message', safeCallback((message) => {
-                kubeClient.send('0' + utils.encodeBase64(message));
-            }));
-        } else {
-            ws.close(1002, 'Invalid URL');
-        }
-    }));
-
-}

src/api/main.ts

@@ -1,21 +0,0 @@
-process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';
-
-import * as path from 'path';
-import * as yargs from 'yargs';
-import * as app from './app';
-
-const argv = yargs.argv;
-
-const ip = argv.ip || '0.0.0.0'
-const port = argv.port || '8001'
-console.log(`start argo-ui on ${argv.ip}:${argv.port}`)
-
-app.create(
-  argv.uiDist || path.join(__dirname, '..', '..', 'dist', 'app'),
-  argv.uiBaseHref || '/',
-  argv.inCluster === 'true',
-  argv.namespace || 'default',
-  argv.forceNamespaceIsolation === 'true',
-  argv.instanceId || undefined,
-  argv.crdVersion || 'v1alpha1',
-).listen(port, ip);

src/api/tsconfig.json

@@ -1,20 +0,0 @@
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "outDir": "../../dist/api",
-    "sourceMap": true,
-    "declaration": false,
-    "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "noUnusedLocals": true,
-    "target": "es5",
-    "typeRoots": [
-      "node_modules/@types"
-    ],
-    "lib": [
-      "es2017",
-      "dom"
-    ]
-  }
-}

src/api/utils.ts

@@ -1,37 +0,0 @@
-import * as express from 'express';
-import {Observable, Observer} from 'rxjs';
-
-export function reactifyStream(stream, converter = (item) => item) {
-    return new Observable((observer: Observer < any >) => {
-        stream.on('data', (d) => observer.next(converter(d)));
-        stream.on('end', () => observer.complete());
-        stream.on('error', (e) => observer.error(e));
-    });
-}
-
-export function reactifyStringStream(stream) {
-    return reactifyStream(stream, (item) => item.toString());
-}
-
-export function streamServerEvents <T>(req: express.Request, res: express.Response, source: Observable <T>, formatter: (input: T) => string) {
-    res.setHeader('Content-Type', 'text/event-stream');
-    res.setHeader('Transfer-Encoding', 'chunked');
-    res.setHeader('X-Content-Type-Options', 'nosniff');
-
-    const subscription = source.subscribe((info) => res.write(`data:${formatter(info)}\n\n`), (err) => {
-        res.set(200);
-        res.end();
-    }, () => {
-        res.set(200);
-        res.end();
-    });
-    req.on('close', () => subscription.unsubscribe());
-}
-
-export function decodeBase64(input: string) {
-    return new Buffer(input, 'base64').toString('ascii');
-}
-
-export function encodeBase64(input: string) {
-    return new Buffer(input).toString('base64');
-}

src/app/app.tsx

@@ -1,84 +0,0 @@
-import createHistory from 'history/createBrowserHistory';
-import * as PropTypes from 'prop-types';
-import * as React from 'react';
-import { Redirect, Route, RouteComponentProps, Router, Switch } from 'react-router';
-
-import { uiUrl } from './shared/base';
-import { Layout, Notifications, NotificationsManager, Popup, PopupManager, PopupProps } from './shared/components';
-import { AppContext } from './shared/context';
-
-export const history = createHistory();
-
-import help from './help';
-import workflows from './workflows';
-
-const workflowsUrl = uiUrl('workflows');
-const helpUrl = uiUrl('help');
-const timelineUrl = uiUrl('timeline');
-const routes: {[path: string]: { component: React.ComponentType<RouteComponentProps<any>> } } = {
-    [workflowsUrl]: { component: workflows.component },
-    [helpUrl]: { component: help.component },
-};
-
-const navItems = [{
-    title: 'Timeline',
-    path: workflowsUrl,
-    iconClassName: 'argo-icon-timeline',
-}, {
-    title: 'Help',
-    path: helpUrl,
-    iconClassName: 'argo-icon-docs',
-}];
-
-export class App extends React.Component<{}, { popupProps: PopupProps }> {
-    public static childContextTypes = {
-        history: PropTypes.object,
-        apis: PropTypes.object,
-    };
-
-    private popupManager: PopupManager;
-    private notificationsManager: NotificationsManager;
-
-    constructor(props: {}) {
-        super(props);
-        this.state = { popupProps: null };
-        this.popupManager = new PopupManager();
-        this.notificationsManager = new NotificationsManager();
-    }
-
-    public componentDidMount() {
-        this.popupManager.popupProps.subscribe((popupProps) => this.setState({ popupProps }));
-    }
-
-    public render() {
-        return (
-            <div>
-                {this.state.popupProps && <Popup {...this.state.popupProps}/>}
-                <Router history={history}>
-                    <Switch>
-                        <Redirect exact={true} path={uiUrl('')} to={workflowsUrl}/>
-                        <Route path={timelineUrl} component={ class ToWorkflows extends React.Component {
-                            public static contextTypes = { router: PropTypes.object };
-                            public render() {return <div/>; }
-                            public componentWillMount() {
-                                const router = (this.context as AppContext).router;
-                                router.history.push(router.route.location.pathname.replace(timelineUrl, workflowsUrl));
-                            }
-                        } }/>
-                        <Layout navItems={navItems}>
-                            <Notifications notifications={this.notificationsManager.notifications}/>
-                            {Object.keys(routes).map((path) => {
-                                const route = routes[path];
-                                return <Route key={path} path={path} component={route.component}/>;
-                            })}
-                        </Layout>
-                    </Switch>
-                </Router>
-            </div>
-        );
-    }
-
-    public getChildContext() {
-        return { history, apis: { popup: this.popupManager, notifications: this.notificationsManager } };
-    }
-}

src/app/help/components/help.scss

@@ -1,57 +0,0 @@
-@import '../../shared/styles/config';
-
-.help-box {
-    min-height: 530px;
-    margin: 30px 10px;
-    padding: 80px 40px;
-    text-align: center;
-    background-color: #fff;
-    box-shadow: 0 0 3px rgba(#000,.3);
-
-    &__ico {
-        width: 180px;
-        height: 180px;
-        margin: 0 auto;
-        background-size: 100%;
-        opacity: .5;
-
-        &--manual {
-            background-image: url('assets/images/User-Manual-200.png');
-        }
-
-        &--email {
-            background-image: url('assets/images/Message-200.png');
-        }
-
-        &--download {
-            background-image: url('assets/images/Download-200.png');
-        }
-    }
-
-    &__docker-logo {
-        width: 23px;
-        height: 23px;
-        vertical-align: baseline;
-    }
-
-    h3 {
-        margin: 40px 0 60px;
-        font-size: 22px;
-    }
-
-    a {
-        font-size: 18px;
-        font-weight: bold;
-    }
-
-    &__link {
-        display: block;
-    }
-
-    &__download {
-        i {
-            width: 30px;
-            font-size: 24px;
-        }
-    }
-}

src/app/help/components/help.tsx

@@ -1,50 +0,0 @@
-import * as React from 'react';
-
-import { Page } from '../../shared/components';
-
-require('./help.scss');
-
-export const Help = () => (
-    <Page title='Help'>
-        <div className='row'>
-            <div className='columns large-4 medium-12'>
-                <div className='help-box'>
-                    <div className='help-box__ico help-box__ico--manual'/>
-                    <h3>Documentation</h3>
-                    <a href='https://argoproj.github.io/' target='_blank' className='help-box__link'> Argo Project</a>
-                </div>
-            </div>
-            <div className='columns large-4 medium-12'>
-                <div className='help-box'>
-                    <div className='help-box__ico help-box__ico--email'/>
-                    <h3>Contact</h3>
-                    <a className='help-box__link' target='_blank' href='https://groups.google.com/forum/#!forum/argoproj'>Argo Community</a>
-                    <a className='help-box__link' target='_blank' href='https://argoproj.slack.com'>Slack Channel</a>
-                </div>
-            </div>
-            <div className='columns large-4 medium-12'>
-                <div className='help-box'>
-                    <div className='help-box__ico help-box__ico--download'/>
-                    <h3>Argo CLI</h3>
-                    <div className='row text-left help-box__download'>
-                        <div className='columns small-4'>
-                            <a href={`https://github.com/argoproj/argo/releases/download/${SYSTEM_INFO.version}/argo-linux-amd64`}><i
-                                    className='fab fa-linux' aria-hidden='true'/> Linux
-                            </a>
-                        </div>
-                        <div className='columns small-4'>
-                            <a href={`https://github.com/argoproj/argo/releases/download/${SYSTEM_INFO.version}/argo-darwin-amd64`}><i
-                                    className='fab fa-apple' aria-hidden='true'/> macOS
-                            </a><br/>
-                        </div>
-                        <div className='columns small-4'>
-                            <a href={`https://github.com/argoproj/argo/releases/download/${SYSTEM_INFO.version}/argo-windows-amd64`}><i
-                                    className='fab fa-windows' aria-hidden='true'/> Windows
-                            </a><br/>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </Page>
-);

src/app/help/index.tsx

@@ -1,5 +0,0 @@
-import { Help } from './components/help';
-
-export default {
-    component: Help,
-};

src/app/index.html

@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <title>Argo</title>
-    <base href="/">
-    <link href="https://fonts.googleapis.com/css?family=Heebo:300,400,500,700" rel="stylesheet">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="icon" type="image/png" href="assets/favicon/favicon-32x32.png" sizes="32x32">
-    <link rel="icon" type="image/png" href="assets/favicon/favicon-16x16.png" sizes="16x16">
-</head>
-
-<body>
-    <div id="app"></div>
-</body>
-
-</html>

src/app/index.tsx

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { App } from './app';
-
-ReactDOM.render(<App />, document.getElementById('app'));
-
-const mdl = module as any;
-if (mdl.hot) {
-    mdl.hot.accept('./app.tsx', () => {
-        const UpdatedApp = require('./app.tsx').App;
-        ReactDOM.render(<UpdatedApp />, document.getElementById('app'));
-    });
-}

src/app/shared/base.ts

@@ -1,12 +0,0 @@
-function baseUrl(): string {
-  const base = document.querySelector('base');
-  return base ? base.getAttribute('href') : '/';
-}
-
-export function uiUrl(uiPath: string): string {
-  return baseUrl() + uiPath;
-}
-
-export function apiUrl(apiPath: string): string {
-  return `${baseUrl()}api${apiPath}`;
-}

src/app/shared/components/duration.tsx

@@ -1,20 +0,0 @@
-import * as moment from 'moment';
-import * as React from 'react';
-
-export const Duration = (props: {durationMs: number, allowNewLines?: boolean}) => {
-    const momentTimeStart = moment.utc(0);
-    const momentTime = moment.utc(props.durationMs * 1000);
-    const duration = moment.duration(momentTime.diff(momentTimeStart));
-    let formattedTime = '';
-
-    if (momentTime.diff(momentTimeStart, 'hours') === 0) {
-        formattedTime = ('0' + duration.minutes()).slice(-2) + ':' + ('0' + duration.seconds()).slice(-2) + ' min';
-    } else {
-        if (momentTime.diff(momentTimeStart, 'days') > 0) {
-            formattedTime += momentTime.diff(momentTimeStart, 'days') + ' days' + (props.allowNewLines ? '<br>' : ' ');
-        }
-
-        formattedTime += ('0' + duration.hours()).slice(-2) + ':' + ('0' + duration.minutes()).slice(-2) + ' hours';
-    }
-    return <span dangerouslySetInnerHTML={{__html: formattedTime}}/>;
-};

src/app/shared/components/layout/layout.tsx

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { NavBar } from '../nav-bar/nav-bar';
-
-require('./layout.scss');
-
-export interface LayoutProps extends React.Props<any> {
-    navItems: Array<{ path: string; iconClassName: string; title: string; }>;
-}
-
-export const Layout = (props: LayoutProps) => (
-    <div className='layout'>
-        <NavBar items={props.navItems}/>
-        {props.children}
-    </div>
-);

src/app/shared/components/logs-viewer/logs-viewer.scss

@@ -1,26 +0,0 @@
-@import '../../styles/config';
-@import 'node_modules/xterm/dist/xterm';
-
-.logs-viewer {
-    font: normal 13px/1.2 'Courier', sans-serif;
-    line-height: 20px;
-    height: 100%;
-    overflow: hidden;
-
-    &__container {
-        height: 100%;
-    }  
-}
-
-
-.xterm-theme-ax {
-    background-color: transparent;
-    color: $argo-color-gray-7;
-    .xterm-viewport {
-        background-color: transparent;
-    }
-
-    .terminal-cursor {
-        background-color: transparent !important;
-    }
-}

src/app/shared/components/nav-bar/nav-bar.tsx

@@ -1,39 +0,0 @@
-import * as classNames from 'classnames';
-import * as PropTypes from 'prop-types';
-import * as React from 'react';
-
-import { AppContext } from '../../context';
-import {Tooltip} from '../tooltip/tooltip';
-
-require('./nav-bar.scss');
-
-export interface NavBarProps extends React.Props<any> {
-    items: Array<{ path: string; iconClassName: string; title: string; }>;
-}
-
-export function isActiveRoute(locationPath: string, path: string) {
-    return locationPath === path || locationPath.startsWith(`${path}/`);
-}
-
-export const NavBar: React.StatelessComponent<NavBarProps> = (props: NavBarProps, context: AppContext) => {
-    const locationPath = context.router.route.location.pathname;
-    return (
-        <div className='nav-bar'>
-        <div className='nav-bar__logo'>
-            <img src='assets/images/logo.png' alt='Argo'/>
-            {(props.items || []).map((item) => (
-                <Tooltip content={item.title} placement='right' arrow={true} key={item.path + item.title}>
-                    <div className={classNames('nav-bar__item', { active: isActiveRoute(locationPath, item.path) })}
-                        onClick={() => context.router.history.push(item.path)}>
-
-                        <i className={item.iconClassName}/>
-                    </div>
-                </Tooltip>
-            ))}
-        </div>
-    </div>);
-};
-
-NavBar.contextTypes = {
-    router: PropTypes.object,
-};

src/app/shared/components/page/page.tsx

@@ -1,55 +0,0 @@
-import * as classNames from 'classnames';
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import { Observable } from 'rxjs';
-
-import { DataLoader } from '../data-loader';
-import { Toolbar, TopBar } from '../top-bar/top-bar';
-import { Utils } from '../utils';
-
-require('./page.scss');
-
-interface PageProps extends React.Props<any> {
-    title: string;
-    toolbar?: Toolbar | Observable<Toolbar>;
-}
-
-export interface PageContextProps {
-    title: string;
-}
-
-export const PageContext = React.createContext<PageContextProps>({ title: 'Argo' });
-
-export const Page = (props: PageProps) => (
-    <div className={classNames('page', { 'page--has-toolbar': !!props.toolbar })}>
-        <React.Fragment>
-            <DataLoader input={new Date()} load={() => Utils.toObservable(props.toolbar)}>
-            {(toolbar: Toolbar) => (
-                <React.Fragment>
-                    <PageContext.Consumer>
-                        {(ctx) => {
-                            const titleParts = [ctx.title];
-                            if (toolbar && toolbar.breadcrumbs && toolbar.breadcrumbs.length > 0) {
-                                titleParts.push(toolbar.breadcrumbs.map((item) => item.title).join(' / '));
-                            } else if (props.title) {
-                                titleParts.push(props.title);
-                            }
-                            return (
-                                <Helmet>
-                                    <title>{titleParts.join(' - ')}</title>
-                                </Helmet>
-                            );
-                        }}
-                    </PageContext.Consumer>
-                    <div className='page__top-bar'>
-                        <TopBar title={props.title} toolbar={toolbar}/>
-                    </div>
-                </React.Fragment>
-            )}
-            </DataLoader>
-            <div className='page__content-wrapper'>
-                {props.children}
-            </div>
-        </React.Fragment>
-    </div>
-);

src/app/shared/components/popup/popup.tsx

@@ -1,36 +0,0 @@
-import * as classNames from 'classnames';
-import * as React from 'react';
-
-export interface PopupProps extends React.Props<any> {
-    icon?: { name: string; color: string; };
-    title: string | React.ReactNode;
-    content?: React.ComponentType;
-    footer?: React.ReactNode;
-    children?: React.ReactNode;
-}
-
-require('./popup.scss');
-
-export const Popup = (props: PopupProps) => (
-    <div className='popup-overlay'>
-        <div className='popup-container'>
-            <div className='row popup-container__header'>
-                {props.title}
-            </div>
-            <div className='row popup-container__body'>
-                {props.icon &&
-                    <div className='columns large-2 popup-container__icon'>
-                        <i className={`${props.icon.name} ${props.icon.color}`}/>
-                    </div>
-                }
-                <div className={classNames('columns', {'large-10': !!props.icon, 'large-12': !props.icon})}>
-                    {props.children ? props.children : <props.content/>}
-                </div>
-            </div>
-
-            <div className={classNames('row popup-container__footer', {'popup-container__footer--additional-padding': !!props.icon})}>
-                {props.footer}
-            </div>
-        </div>
-    </div>
-);

src/app/shared/components/sliding-panel/sliding-panel.tsx

@@ -1,50 +0,0 @@
-import * as classNames from 'classnames';
-import * as React from 'react';
-
-export interface SlidingPanelProps extends React.Props<any> {
-    isShown?: boolean;
-    isNarrow?: boolean;
-    isMiddle?: boolean;
-    hasNoPadding?: boolean;
-    offCanvas?: boolean;
-    hasCloseButton?: boolean;
-    header?: React.ReactNode;
-    footer?: React.ReactNode;
-    onClose?: () => any;
-}
-
-require('./sliding-panel.scss');
-
-export const SlidingPanel = (props: SlidingPanelProps) => (
-    <div className={classNames('sliding-panel', {
-        'sliding-panel--has-header': !!props.header,
-        'sliding-panel--has-footer': !!props.footer,
-        'sliding-panel--is-narrow': props.isNarrow,
-        'sliding-panel--is-middle': props.isMiddle,
-        'sliding-panel--opened': props.isShown,
-        'sliding-panel--no-padding': props.hasNoPadding,
-        'sliding-panel--off-canvas': props.offCanvas,
-    })}>
-        <div className='sliding-panel__wrapper'>
-            <button className='sliding-panel__close' aria-hidden='true' onClick={() => props.onClose && props.onClose()}>
-                <span>
-                    <i className='argo-icon-close' aria-hidden='true'/>
-                </span>
-            </button>
-            {props.header && (
-                <div className={classNames('sliding-panel__header', {'sliding-panel__header--close-btn-right-padding': props.hasCloseButton})}>
-                    {props.header}
-                </div>
-            )}
-            <div className='sliding-panel__body'>
-                {props.children}
-            </div>
-            {props.footer && (
-                <div className='sliding-panel__footer'>
-                    {props.footer}
-                </div>
-            )}
-        </div>
-        <div className='sliding-panel__outside' onClick={() => props.onClose && props.onClose()}/>
-    </div>
-);

src/app/shared/components/tooltip/tooltip.tsx

@@ -1,4 +0,0 @@
-import Tippy from '@tippy.js/react';
-import * as React from 'react';
-
-export const Tooltip = ( props: any ) => <Tippy animation='fade' arrow='true' {...props} />;

src/app/shared/components/utils.spec.ts

@@ -1,10 +0,0 @@
-import { expect } from 'chai';
-
-import { Utils } from './utils';
-
-describe('Utils', () => {
-    it('returns correct short node name', () => {
-        expect(Utils.shortNodeName({name: 'ci-example-kxzs4.test', displayName: 'test'})).to.be.eq('test');
-        expect(Utils.shortNodeName({name: 'ci-example-kxzs4', displayName: null})).to.be.eq('ci-example-kxzs4');
-    });
-});

src/app/shared/components/utils.ts

@@ -1,78 +0,0 @@
-import { Observable } from 'rxjs';
-import { NODE_PHASE } from '../../../models';
-
-export const Utils = {
-    statusIconClasses(status: string): string {
-        let classes = [];
-        switch (status) {
-            case NODE_PHASE.ERROR:
-            case NODE_PHASE.FAILED:
-                classes = ['fa-times-circle', 'status-icon--failed'];
-                break;
-            case NODE_PHASE.SUCCEEDED:
-                classes = ['fa-check-circle', 'status-icon--success'];
-                break;
-            case NODE_PHASE.RUNNING:
-                classes = ['fa-circle-notch', 'status-icon--running', 'status-icon--spin'];
-                break;
-            case NODE_PHASE.PENDING:
-                classes = ['fa-clock', 'status-icon--pending', 'status-icon--slow-spin'];
-                break;
-            default:
-                classes = ['fa-clock', 'status-icon--init'];
-                break;
-        }
-        return classes.join(' ');
-    },
-
-    shortNodeName(node: { name: string, displayName: string }): string {
-        return node.displayName || node.name;
-    },
-
-    getScrollParent(el: HTMLElement): HTMLElement {
-        const regex = /(auto|scroll)/;
-        while (el.parentNode) {
-            el = el.parentNode as HTMLElement;
-            const overflow = getComputedStyle(el, null).getPropertyValue('overflow') +
-            getComputedStyle(el, null).getPropertyValue('overflow-y') +
-            getComputedStyle(el, null).getPropertyValue('overflow-x');
-            if (regex.test(overflow)) {
-                return el;
-            }
-        }
-        return document.body;
-    },
-
-    scrollTo(element: HTMLElement, to: number, duration = 1000) {
-        function easeInOutQuad(t: number, b: number, c: number, d: number) {
-            t /= d / 2;
-            if (t < 1) {
-                return c / 2 * t * t + b;
-            }
-
-            t--;
-            return -c / 2 * ( t * ( t - 2 ) - 1) + b;
-        }
-        const start = element.scrollTop;
-        const change = to - start;
-        let currentTime = 0;
-        const increment = 20;
-
-        const animateScroll = () => {
-            currentTime += increment;
-            element.scrollTop = easeInOutQuad(currentTime, start, change, duration);
-            if (currentTime < duration) {
-                setTimeout(animateScroll, increment);
-            }
-        };
-        animateScroll();
-    },
-
-    toObservable<T>(val: T | Observable<T> | Promise<T>): Observable<T> {
-        const observable = val as Observable<T>;
-        if (observable && observable.subscribe && observable.catch) {
-            return observable as Observable<T>;
-        }
-        return Observable.from([val as T]);
-    },
-};

src/app/shared/services/index.ts

@@ -1,11 +0,0 @@
-import { WorkflowsService } from './workflows-service';
-
-export interface Services {
-    workflows: WorkflowsService;
-}
-
-export * from './workflows-service';
-
-export const services: Services = {
-    workflows: new WorkflowsService(),
-};

src/app/shared/services/requests.ts

@@ -1,69 +0,0 @@
-import * as _superagent from 'superagent';
-const superagentPromise = require('superagent-promise');
-import { Observable, Observer } from 'rxjs';
-
-import { apiUrl } from '../base';
-
-type Callback = (data: any) => void;
-
-declare class EventSource {
-    public onopen: Callback;
-    public onmessage: Callback;
-    public onerror: Callback;
-    public readyState: number;
-    constructor(url: string);
-    public close(): void;
-}
-
-enum ReadyState {
-  CONNECTING = 0,
-  OPEN = 1,
-  CLOSED = 2,
-  DONE = 4,
-}
-
-const superagent: _superagent.SuperAgentStatic = superagentPromise(_superagent, global.Promise);
-
-export default {
-    get(url: string) {
-        return superagent.get(apiUrl(url));
-    },
-
-    post(url: string) {
-        return superagent.post(apiUrl(url));
-    },
-
-    put(url: string) {
-        return superagent.put(apiUrl(url));
-    },
-
-    patch(url: string) {
-        return superagent.patch(apiUrl(url));
-    },
-
-    loadEventSource(url: string, allowAutoRetry = false): Observable<string> {
-        return Observable.create((observer: Observer<any>) => {
-            const eventSource = new EventSource(apiUrl(url));
-            let opened = false;
-            eventSource.onopen = (msg) => {
-                if (!opened) {
-                    opened = true;
-                } else if (!allowAutoRetry) {
-                    eventSource.close();
-                    observer.complete();
-                }
-            };
-            eventSource.onmessage = (msg) => observer.next(msg.data);
-            eventSource.onerror = (e) => () => {
-                if (e.eventPhase === ReadyState.CLOSED || eventSource.readyState === ReadyState.CONNECTING) {
-                    observer.complete();
-                } else {
-                    observer.error(e);
-                }
-            };
-            return () => {
-                eventSource.close();
-            };
-        });
-    },
-};

src/app/shared/services/workflows-service.ts

@@ -1,48 +0,0 @@
-import { Observable } from 'rxjs';
-
-import * as models from '../../../models';
-import requests from './requests';
-
-export class WorkflowsService {
-
-    public get(namespace: string, name: string): Promise<models.Workflow> {
-        return requests.get(`/workflows/${namespace}/${name}`).then((res) => res.body as models.Workflow).then(this.populateDefaultFields);
-    }
-
-    public list(phases: string[]): Promise<models.Workflow[]> {
-        return requests.get('/workflows').query({ phase: phases }).then((res) => res.body as models.WorkflowList).then((list) => list.items.map(this.populateDefaultFields));
-    }
-
-    public watch(filter?: {namespace: string; name: string} | Array<string>): Observable<models.WatchEvent<models.Workflow>> {
-        let url = '/workflows/live';
-        if (filter) {
-            if (filter instanceof Array) {
-                const phases = (filter as Array<string>).map((phase) => `phase=${phase}`).join('&');
-                url = `${url}?${phases}`;
-            } else {
-                const workflow = filter as {namespace: string; name: string};
-                url = `${url}?namespace=${workflow.namespace}&name=${workflow.name}`;
-            }
-        }
-        return requests.loadEventSource(url).repeat().retry().map((data) => JSON.parse(data) as models.WatchEvent<models.Workflow>).map((watchEvent) => {
-            watchEvent.object = this.populateDefaultFields(watchEvent.object);
-            return watchEvent;
-        });
-    }
-
-    public getContainerLogs(workflow: models.Workflow, nodeId: string, container: string): Observable<string> {
-        return requests.loadEventSource(`/logs/${workflow.metadata.namespace}/${workflow.metadata.name}/${nodeId}/${container}`).map((line) => {
-            return line ? line + '\n' : line;
-        });
-    }
-
-    public getArtifactDownloadUrl(workflow: models.Workflow, nodeId: string, artifactName: string) {
-        return `/api/workflows/${workflow.metadata.namespace}/${workflow.metadata.name}/artifacts/${nodeId}/${encodeURIComponent(artifactName)}`;
-    }
-
-    private populateDefaultFields(workflow: models.Workflow): models.Workflow {
-        workflow = {status: { nodes: {} }, ...workflow};
-        workflow.status.nodes = workflow.status.nodes || {};
-        return workflow;
-    }
-}

src/app/shared/styles/icons/helm.svg

@@ -1,43 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 620 645.6" style="enable-background:new 0 0 620 645.6;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#277A9F;}
-	.st1{fill:none;stroke:#277A9F;stroke-width:30;}
-</style>
-<title>logo</title>
-<desc>Created with Sketch.</desc>
-<g id="Page-1">
-	<g id="logo_x40_2x" transform="translate(-152.000000, -162.000000)">
-		<g id="logo" transform="translate(149.000000, 162.000000)">
-			<g id="helm" transform="translate(22.377622, 0.000000)">
-				
-					<g id="rungs-bottom" transform="translate(41.500000, 108.500000) scale(1, -1) translate(-41.500000, -108.500000) translate(0.000000, 91.000000)">
-					<path id="Oval-1" class="st0" d="M417.2-357.5c10.4,7.3,34.3-8.7,53.2-35.8s25.9-55,15.4-62.3c-10.4-7.3-34.3,8.7-53.2,35.8
-						C413.7-392.7,406.8-364.8,417.2-357.5z"/>
-					<path id="Oval-1-Copy" class="st0" d="M167.6-357.5c-10.4,7.3-34.3-8.7-53.2-35.8c-19-27.1-25.9-55-15.4-62.3
-						s34.3,8.7,53.2,35.8S178.1-364.8,167.6-357.5z"/>
-					<path id="Oval-1-Copy-4" class="st0" d="M292.3-399.9c-12.7,0-23.1-26.8-23.1-59.9s10.3-59.9,23.1-59.9s23.1,26.8,23.1,59.9
-						S305-399.9,292.3-399.9z"/>
-				</g>
-				<g id="rungs-top">
-					<path id="Oval-1_1_" class="st0" d="M417.2,162.5c10.4,7.3,34.3-8.7,53.2-35.8s25.9-55,15.4-62.3c-10.4-7.3-34.3,8.7-53.2,35.8
-						S406.8,155.2,417.2,162.5z"/>
-					<path id="Oval-1-Copy_1_" class="st0" d="M167.6,162.5c-10.4,7.3-34.3-8.7-53.2-35.8S88.5,71.8,99,64.4s34.3,8.7,53.2,35.8
-						S178.1,155.2,167.6,162.5z"/>
-					<path id="Oval-1-Copy-4_1_" class="st0" d="M292.3,120.1c-12.7,0-23.1-26.8-23.1-59.9s10.3-59.9,23.1-59.9s23.1,26.8,23.1,59.9
-						S305,120.1,292.3,120.1z"/>
-				</g>
-				<path id="Oval-1_2_" class="st1" d="M470.2,215.6C433,154.4,365.6,113.5,288.7,113.5c-74.9,0-140.7,38.7-178.4,97.2 M114.3,446
-					c38.3,55.1,102.1,91.1,174.4,91.1c72.4,0,136.3-36.2,174.6-91.4"/>
-			</g>
-			<path id="HELM" class="st0" d="M3.6,244.1H48v62.5h50.1v-62.5h44.4V412H98.1v-66.6H48V412H3.6V244.1z M179.8,244.1h108.5v37.2
-				h-64.1v26.3H279v37.2h-54.8v30h66.6V412H179.8V244.1z M323.4,244.1h44.4v130.7h63.5V412h-108V244.1z M460.3,244.1h46l26.3,69.7
-				l9.3,27.4h1l9.3-27.4l25.3-69.7h46V412h-41.3v-49.6c0-4.3,0.2-9,0.6-14.2c0.4-5.2,0.9-10.5,1.4-15.9c0.5-5.4,1.1-10.7,1.8-15.9
-				c0.7-5.2,1.3-9.8,1.8-13.9h-1l-13.9,39.3l-23.2,56.6h-16.5l-23.2-56.6l-13.4-39.3h-1c0.5,4.1,1.1,8.8,1.8,13.9
-				c0.7,5.2,1.3,10.5,1.8,15.9c0.5,5.4,1,10.7,1.4,15.9c0.4,5.2,0.6,9.9,0.6,14.2V412h-40.8V244.1z"/>
-		</g>
-	</g>
-</g>
-</svg>

src/app/tsconfig.json

@@ -1,20 +0,0 @@
-{
-    "compilerOptions": {
-        "outDir": "./../../dist/app",
-        "sourceMap": true,
-        "noImplicitAny": true,
-        "module": "commonjs",
-        "target": "es5",
-        "jsx": "react",
-        "experimentalDecorators": true,
-        "noUnusedLocals": true,
-        "declaration": false,
-        "lib": [
-            "es2017",
-            "dom"
-        ]
-    },
-    "include": [
-        "./**/*"
-    ]
-}

src/app/typings.d.ts

@@ -1,2 +0,0 @@
-declare var SYSTEM_INFO: { version: string; };
-

src/app/webpack.config.js

@@ -1,70 +0,0 @@
-'use strict;';
-
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const webpack = require('webpack');
-const path = require('path');
-
-const isProd = process.env.NODE_ENV === 'production';
-
-const config = {
-    entry: './src/app/index.tsx',
-    output: {
-        filename: '[name].[chunkhash].js',
-        path: __dirname + '/../../dist/app'
-    },
-
-    devtool: 'source-map',
-
-    resolve: {
-        extensions: ['.ts', '.tsx', '.js', '.json']
-    },
-
-    module: {
-        rules: [
-            {
-                test: /\.tsx?$/,
-                loaders: [ ...( isProd ? [] : ['react-hot-loader/webpack']), `ts-loader?configFile=${path.resolve('./src/app/tsconfig.json')}`]
-            }, {
-                enforce: 'pre',
-                test: /\.js$/,
-                loader: 'source-map-loader'
-            }, {
-                test: /\.scss$/,
-                exclude: /node_modules/,
-                loader: 'style-loader!raw-loader!sass-loader'
-            }, {
-                test: /\.css$/,
-                loader: 'style-loader!raw-loader'
-            },
-        ]
-    },
-    node: {
-        fs: 'empty',
-    },
-    plugins: [
-        new webpack.DefinePlugin({
-            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
-            SYSTEM_INFO: JSON.stringify({
-                version: process.env.ARGO_VERSION || 'latest',
-            }),
-        }),
-        new HtmlWebpackPlugin({ template: 'src/app/index.html' }),
-        new CopyWebpackPlugin([{
-            from: 'src/assets', to: 'assets'
-        }, {
-            from: 'node_modules/@fortawesome/fontawesome-free/webfonts', to: 'assets/fonts'
-        }]),
-    ],
-    devServer: {
-        historyApiFallback: true,
-        proxy: {
-            '/api': {
-                'target': process.env.ARGO_API_URL || 'http://localhost:8001',
-                'secure': false,
-            }
-        }
-    }
-};
-
-module.exports = config;

src/app/workflows/components/index.ts

@@ -1,4 +0,0 @@
-export * from './workflow-dag/workflow-dag';
-export * from './workflow-list-item/workflow-list-item';
-export * from './workflow-timeline/workflow-timeline';
-export * from './workflow-yaml-viewer/workflow-yaml-viewer';

src/app/workflows/components/workflow-artifacts.tsx

@@ -1,52 +0,0 @@
-import * as React from 'react';
-
-import * as models from '../../../models';
-import { services } from '../../shared/services';
-
-interface Props {
-    workflow: models.Workflow;
-}
-
-export const WorkflowArtifacts = (props: Props) => {
-    const workflowStatusNodes = props.workflow.status && props.workflow.status.nodes || {};
-    const artifacts = Object.keys(workflowStatusNodes)
-        .map((nodeName) => {
-            const node = workflowStatusNodes[nodeName];
-            const nodeOutputs = (node.outputs || { artifacts: [] as models.Artifact[] });
-            const items = nodeOutputs.artifacts || [];
-            return items.map((item) => Object.assign({}, item, {
-                downloadUrl: services.workflows.getArtifactDownloadUrl(props.workflow, node.id, item.name),
-                stepName: node.name,
-                dateCreated: node.finishedAt,
-                nodeName,
-            }));
-        })
-        .reduce((first, second) => first.concat(second), []) || [];
-    if (artifacts.length === 0) {
-        return (
-            <div className='white-box'>
-                <div className='row'>
-                    <div className='columns small-12 text-center'>No data to display</div>
-                </div>
-            </div>
-        );
-    }
-    return (
-        <div className='white-box'>
-            <div className='white-box__details'>
-                {artifacts.map((artifact) => (
-                    <div className='row white-box__details-row'  key={artifact.path}>
-                        <div className='columns small-2'>
-                            <span>
-                                <a href={artifact.downloadUrl}> <i className='icon argo-icon-artifact'/></a> {artifact.name}
-                            </span>
-                        </div>
-                        <div className='columns small-4'>{artifact.stepName}</div>
-                        <div className='columns small-3'>{artifact.path}</div>
-                        <div className='columns small-3'>{artifact.dateCreated}</div>
-                    </div>
-                ))}
-            </div>
-        </div>
-    );
-};

src/app/workflows/components/workflow-dag/workflow-dag.scss

@@ -1,146 +0,0 @@
-@import '../../../shared/styles/config';
-@import 'node_modules/@fortawesome/fontawesome-free/scss/variables';
-@import 'node_modules/@fortawesome/fontawesome-free/scss/mixins';
-
-.workflow-dag {
-    position: relative;
-
-    &__line {
-        position: absolute;
-        border-top: 1px dashed $argo-color-gray-5;
-    }
-
-    &__edge {
-        .workflow-dag__line {
-            &:last-child:not(.workflow-dag__line--no-arrow) {
-                &:after {
-                        content: '\25BA';
-                        position: absolute;
-                        color: #A3A3A3;
-                        font-size: 12px;
-                        top: -9px;
-                        left: -1px;
-                        transform: rotate(180deg);
-                    }
-                }
-            }
-        }
-
-    &__node {
-        position: absolute;
-        padding-left: 3.5em;
-        box-shadow: 1px 1px 1px $argo-color-gray-4;
-        background-color: white;
-        border-radius: 4px;
-        border: 1px solid transparent;
-        cursor: pointer;
-
-        &.active {
-            border-color: $argo-color-teal-6;
-        }
-
-        &.virtual {
-            background-color: transparent;
-            box-shadow: none;
-            border: none;
-            padding-left: 0;
-
-            &:after {
-                content: '';
-                position: absolute;
-                display: block;
-                border-radius: 10px;
-                width: 20px;
-                height: 20px;
-                left: -10px;
-                top: -10px;
-                border: 1px dashed $argo-color-gray-5;
-            }
-
-            .workflow-dag__node-status, .workflow-dag__node-title {
-                display: none;
-            }
-        }
-        &.virtual.active {
-            &:after {
-                border-color: $argo-color-teal-6;
-            }
-        }
-    }
-
-    &__node.active &__node-status {
-        border: 1px solid $argo-color-teal-6;
-        border-right: none;
-    }
-
-    &__node-status {
-        position: absolute;
-        left: -1px;
-        bottom: -1px;
-        top: -1px;
-        width: 3em;
-        border-top-left-radius: 4px;
-        border-bottom-left-radius: 4px;
-        text-align: center;
-        color: white;
-
-        &--error, &--failed {
-            background-color: $argo-failed-color;
-            &::after {
-                @include fa-icon;
-                content: fa-content($fa-var-times-circle);
-            }
-        }
-
-        &--pending {
-            background-color: $argo-status-warning-color;
-            &::after {
-                @include fa-icon;
-                content: fa-content($fa-var-clock);
-                font-size: 1em;
-                animation-name: spin;
-                animation-duration: 10000ms;
-                animation-iteration-count: infinite;
-                animation-timing-function: linear;
-            }
-        }
-
-        &--running {
-            background-color: $argo-running-color;
-            &::after {
-                @include fa-icon;
-                content: fa-content($fa-var-circle-notch);
-                animation-name: spin;
-                animation-duration: 4000ms;
-                animation-iteration-count: infinite;
-                animation-timing-function: linear;
-            }
-        }
-
-        @keyframes spin {
-            from {transform:rotate(0deg);}
-            to {transform:rotate(360deg);}
-        }
-    
-        &--succeeded {
-            background-color: $argo-success-color;
-            &::after {
-                @include fa-icon;
-                content: fa-content($fa-var-check);
-            }
-        }
-        &--skipped {
-            background-color: $argo-color-gray-4;
-        }
-    }
-
-    &__node-title {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-    }
-
-    &__line, &__node {
-        transition: left 0.2s, top 0.2s, width 0.2s, height 0.2s;
-    }
-}

src/app/workflows/components/workflow-dag/workflow-dag.tsx

@@ -1,130 +0,0 @@
-import * as classNames from 'classnames';
-import * as dagre from 'dagre';
-import * as React from 'react';
-
-import * as models from '../../../../models';
-import { Utils } from '../../../shared/components';
-
-export interface WorkflowDagProps {
-    workflow: models.Workflow;
-    selectedNodeId?: string;
-    nodeClicked?: (node: models.NodeStatus) => any;
-}
-
-interface Line { x1: number; y1: number; x2: number; y2: number; noArrow: boolean; }
-
-require('./workflow-dag.scss');
-
-const NODE_WIDTH = 182;
-const NODE_HEIGHT = 52;
-
-export class WorkflowDag extends React.Component<WorkflowDagProps> {
-
-    public render() {
-        const graph = new dagre.graphlib.Graph();
-        graph.setGraph({});
-        graph.setDefaultEdgeLabel(() => ({}));
-        const nodes = this.props.workflow.status && this.props.workflow.status.nodes || {};
-        Object.keys(nodes).forEach((nodeId) => {
-            const node = nodes[nodeId];
-            if (this.isVirtual(node)) {
-                graph.setNode(nodeId, {width: 1, height: 1, ...nodes[nodeId]});
-            } else {
-                graph.setNode(nodeId, {width: NODE_WIDTH, height: NODE_HEIGHT, ...nodes[nodeId]});
-            }
-        });
-        Object.keys(nodes).forEach((nodeId) => {
-            const node = nodes[nodeId];
-            (node.children || []).forEach((childId) => {
-                // make sure workflow is in consistent state and child node exist
-                if (nodes[childId]) {
-                    graph.setEdge(nodeId, childId);
-                }
-            });
-        });
-        const onExitHandlerNodeId = Object.keys(nodes).find((id) => nodes[id].name === `${this.props.workflow.metadata.name}.onExit`);
-        if (onExitHandlerNodeId) {
-            this.getOutboundNodes(this.props.workflow.metadata.name).forEach((nodeId) => graph.setEdge(nodeId, onExitHandlerNodeId));
-        }
-
-        dagre.layout(graph);
-        const edges: {from: string, to: string, lines: Line[]}[] = [];
-        graph.edges().forEach((edgeInfo) => {
-            const edge = graph.edge(edgeInfo);
-            const lines: Line[] = [];
-            if (edge.points.length > 1) {
-                for (let i = 1; i < edge.points.length; i++) {
-                    const toNode = nodes[edgeInfo.w];
-                    lines.push({ x1: edge.points[i - 1].x, y1: edge.points[i - 1].y, x2: edge.points[i].x, y2: edge.points[i].y, noArrow: this.isVirtual(toNode) });
-                }
-            }
-            edges.push({ from: edgeInfo.v, to: edgeInfo.w, lines });
-        });
-        const size = this.getGraphSize(graph.nodes().map((id) => graph.node(id)));
-        return (
-            <div className='workflow-dag' style={{width: size.width, height: size.height}}>
-                {graph.nodes().map((id) => {
-                    const node = graph.node(id) as models.NodeStatus & dagre.Node;
-                    const shortName = Utils.shortNodeName(node);
-                    return (
-                        <div key={id}
-                                className={classNames('workflow-dag__node', {active: node.id === this.props.selectedNodeId, virtual: this.isVirtual(node)})}
-                                style={{left: (node.x - (node.width / 2)), top: (node.y - (node.height / 2)), width: node.width, height: node.height}}
-                                onClick={() => this.props.nodeClicked && this.props.nodeClicked(node)}>
-                            <div
-                                className={`fas workflow-dag__node-status workflow-dag__node-status--${node.phase.toLocaleLowerCase()}`}
-                                style={{lineHeight: NODE_HEIGHT + 'px'}}/>
-                            <div
-                                className='workflow-dag__node-title'
-                                style={{lineHeight: NODE_HEIGHT + 'px'}}>{shortName}</div>
-                        </div>
-                    );
-                })}
-                {edges.map((edge) => (
-                    <div key={`${edge.from}-${edge.to}`} className='workflow-dag__edge'>
-                    {edge.lines.map((line, i) => {
-                        const distance = Math.sqrt(Math.pow(line.x1 - line.x2, 2) + Math.pow(line.y1 - line.y2, 2));
-                        const xMid = (line.x1 + line.x2) / 2;
-                        const yMid = (line.y1 + line.y2) / 2;
-                        const angle = Math.atan2(line.y1 - line.y2, line.x1 - line.x2) * 180 / Math.PI;
-                        return (
-                            <div className={classNames('workflow-dag__line', {'workflow-dag__line--no-arrow': line.noArrow })} key={i}
-                                style={{ width: distance, left: xMid - (distance / 2), top: yMid, transform: ` rotate(${angle}deg)`}} />
-                        );
-                    })}</div>
-                ))}
-            </div>
-        );
-    }
-
-    private getOutboundNodes(nodeID: string): string[] {
-        const node = this.props.workflow.status.nodes[nodeID];
-        if (node.type === 'Pod' || node.type === 'Skipped') {
-            return [node.id];
-        }
-        let outbound = Array<string>();
-        for (const outboundNodeID of node.outboundNodes || []) {
-            const outNode = this.props.workflow.status.nodes[outboundNodeID];
-            if (outNode.type === 'Pod') {
-                outbound.push(outboundNodeID);
-            } else {
-                outbound = outbound.concat(this.getOutboundNodes(outboundNodeID));
-            }
-        }
-        return outbound;
-    }
-
-    private isVirtual(node: models.NodeStatus) {
-        return (node.type === 'StepGroup' || node.type === 'DAG' || node.type === 'TaskGroup') && !!node.boundaryID;
-    }
-
-    private getGraphSize(nodes: dagre.Node[]): { width: number, height: number} {
-        let width = 0;
-        let height = 0;
-        nodes.forEach((node) => {
-            width = Math.max(node.x + (node.width / 2), width);
-            height = Math.max(node.y + (node.height / 2), height);
-        });
-        return {width, height};
-    }
-}

src/app/workflows/components/workflow-details/workflow-details.scss

@@ -1,95 +0,0 @@
-@import '../../../shared/styles/config';
-
-.workflow-details {
-
-    &, & > .row {
-        height: calc(100vh - 2 * #{$top-bar-height});
-    }
-
-    &__content {
-        padding: 1em;
-    }
-
-    &__topbar-buttons {
-        display: inline-block;
-        white-space: nowrap;
-
-        a {
-            vertical-align: middle;
-            text-align: center;
-            line-height: 1em;
-            padding: 0.5em;
-            font-size: 1.1em;
-            border: 1px solid transparent;
-            display: inline-block;
-            width: 2em;
-            margin-right: 0.5em;
-            color: $argo-color-gray-8;
-    
-            &.active {
-                background-color: $argo-color-gray-3;
-                border: 1px solid $argo-color-gray-4;
-                border-radius: 5px;
-                cursor: default;
-            }
-        }
-    }
-
-    &__graph-container {
-        position: relative;
-        overflow: auto;
-        height: calc(100vh - 2 * #{$top-bar-height});
-        width: 100%;
-        transition: width 0.2s;
-        float: left;
-
-        .workflow-dag {
-            margin: 3.5em auto;
-        }
-        .workflow-timeline {
-            min-height: calc(100vh - 2 * #{$top-bar-height});
-        }
-    }
-
-    &__step-info {
-        min-height: calc(100vh - 2 * #{$top-bar-height});
-        border-left: 1px solid $argo-color-gray-4;
-        width: 0;
-        transition: width 0.2s;
-        float: right
-    }
-
-    &__step-info-close {
-        display: block;
-        position: absolute;
-        cursor: pointer;
-        top: 1em;
-        right: -1em;
-        z-index: 8;
-        border-radius: 50%;
-        color: $argo-color-gray-5;
-        font-size: 20px;
-        padding: 5px;
-
-        @media screen and (max-width: $argo-breakpoint-md) {
-            top: 8px;
-        }
-
-        &:hover {
-            background-color: $argo-color-gray-4;
-        }
-    }
-
-    &--step-node-expanded &__graph-container {
-        width: calc(100% - 570px);
-    }
-
-    &--step-node-expanded &__step-info {
-        width: 570px;
-    }
-
-    &--step-node-expanded &__step-info-close {
-        right: 1em;
-    }
-
-}

src/app/workflows/components/workflow-details/workflow-details.tsx

@@ -1,229 +0,0 @@
-import * as classNames from 'classnames';
-import * as PropTypes from 'prop-types';
-import * as React from 'react';
-import { RouteComponentProps } from 'react-router';
-import { Observable, Subscription } from 'rxjs';
-
-import * as models from '../../../../models';
-import { uiUrl } from '../../../shared/base';
-import { LogsViewer,  NotificationType, Page, SlidingPanel } from '../../../shared/components';
-import { AppContext } from '../../../shared/context';
-import { services } from '../../../shared/services';
-
-import { WorkflowArtifacts } from '../workflow-artifacts';
-import { WorkflowDag } from '../workflow-dag/workflow-dag';
-import { WorkflowNodeInfo } from '../workflow-node-info/workflow-node-info';
-import { WorkflowParametersPanel } from '../workflow-parameters-panel';
-import { WorkflowSummaryPanel } from '../workflow-summary-panel';
-import { WorkflowTimeline } from '../workflow-timeline/workflow-timeline';
-import { WorkflowYamlViewer } from '../workflow-yaml-viewer/workflow-yaml-viewer';
-
-require('./workflow-details.scss');
-
-function parseSidePanelParam(param: string) {
-    const [type, nodeId, container] = (param || '').split(':');
-    if (type === 'logs' || type === 'yaml') {
-        return { type, nodeId, container };
-    }
-    return null;
-}
-
-export class WorkflowDetails extends React.Component<RouteComponentProps<any>, { workflow: models.Workflow }> {
-
-    public static contextTypes = {
-        router: PropTypes.object,
-        apis: PropTypes.object,
-    };
-
-    private changesSubscription: Subscription;
-    private timelineComponent: WorkflowTimeline;
-
-    private get selectedTabKey() {
-        return new URLSearchParams(this.props.location.search).get('tab') || 'workflow';
-    }
-
-    private get selectedNodeId() {
-        return new URLSearchParams(this.props.location.search).get('nodeId');
-    }
-
-    private get sidePanel() {
-        return parseSidePanelParam(new URLSearchParams(this.props.location.search).get('sidePanel'));
-    }
-
-    constructor(props: RouteComponentProps<any>) {
-        super(props);
-        this.state = { workflow: null };
-    }
-
-    public componentWillMount() {
-        this.loadWorkflow(this.props.match.params.namespace, this.props.match.params.name);
-    }
-
-    public componentWillReceiveProps(nextProps: RouteComponentProps<any>) {
-        if (this.props.match.params.name !== nextProps.match.params.name || this.props.match.params.namespace !== nextProps.match.params.namespace) {
-            this.loadWorkflow(nextProps.match.params.namespace, nextProps.match.params.name);
-        }
-    }
-
-    public componentDidUpdate(prevProps: RouteComponentProps<any>) {
-        // Redraw timeline component after node details panel collapsed/expanded.
-        const prevSelectedNodeId = new URLSearchParams(this.props.location.search).get('nodeId');
-        if (this.timelineComponent && !!this.selectedNodeId !== !!prevSelectedNodeId) {
-            setTimeout(() => {
-                this.timelineComponent.updateWidth();
-            }, 300);
-        }
-    }
-
-    public componentWillUnmount() {
-        this.ensureUnsubscribed();
-    }
-
-    public render() {
-        const selectedNode = this.state.workflow && this.state.workflow.status && this.state.workflow.status.nodes[this.selectedNodeId];
-        return (
-            <Page title={'Workflow Details'} toolbar={{
-                    breadcrumbs: [{ title: 'Workflows', path: uiUrl('workflows') }, { title: this.props.match.params.name }],
-                    tools: (
-                        <div className='workflow-details__topbar-buttons'>
-                            <a className={classNames({ active: this.selectedTabKey === 'summary' })} onClick={() => this.selectTab('summary')}>
-                                <i className='fa fa-columns'/>
-                            </a>
-                            <a className={classNames({ active: this.selectedTabKey === 'timeline' })} onClick={() => this.selectTab('timeline')}>
-                                <i className='fa argo-icon-timeline'/>
-                            </a>
-                            <a className={classNames({ active: this.selectedTabKey === 'workflow' })} onClick={() => this.selectTab('workflow')}>
-                                <i className='fa argo-icon-workflow'/>
-                            </a>
-                        </div>
-                    ),
-                }}>
-                <div className={classNames('workflow-details', { 'workflow-details--step-node-expanded': !!selectedNode })}>
-                    {this.selectedTabKey === 'summary' && this.renderSummaryTab() || this.state.workflow && (
-                        <div>
-                            <div className='workflow-details__graph-container'>
-                                { this.selectedTabKey === 'workflow' && (
-                                    <WorkflowDag
-                                        workflow={this.state.workflow}
-                                        selectedNodeId={this.selectedNodeId}
-                                        nodeClicked={(node) => this.selectNode(node.id)}/>
-                                ) || (<WorkflowTimeline
-                                        workflow={this.state.workflow}
-                                        selectedNodeId={this.selectedNodeId}
-                                        nodeClicked={(node) => this.selectNode(node.id)}
-                                        ref={(timeline) => this.timelineComponent = timeline}
-                                />)}
-                            </div>
-                            <div className='workflow-details__step-info'>
-                                <button className='workflow-details__step-info-close' onClick={() => this.removeNodeSelection()}>
-                                    <i className='argo-icon-close'/>
-                                </button>
-                                {selectedNode && (
-                                    <WorkflowNodeInfo
-                                        node={selectedNode}
-                                        workflow={this.state.workflow}
-                                        onShowContainerLogs={(nodeId, container) => this.openContainerLogsPanel(nodeId, container)}
-                                        onShowYaml={(nodeId) => this.openNodeYaml(nodeId)}/>
-                                )}
-                            </div>
-                        </div>
-                    )}
-                </div>
-                {this.state.workflow && (
-                    <SlidingPanel isShown={this.selectedNodeId && !!this.sidePanel} onClose={() => this.closeSidePanel()}>
-                        {this.sidePanel && this.sidePanel.type === 'logs' && <LogsViewer source={{
-                            key: this.sidePanel.nodeId,
-                            loadLogs: () => services.workflows.getContainerLogs(this.state.workflow, this.sidePanel.nodeId, this.sidePanel.container || 'main'),
-                            shouldRepeat: () => this.state.workflow.status.nodes[this.sidePanel.nodeId].phase === 'Running',
-                        }} />}
-                        {this.sidePanel && this.sidePanel.type === 'yaml' && <WorkflowYamlViewer
-                            workflow={this.state.workflow}
-                            selectedNode={selectedNode}
-                        />}
-                    </SlidingPanel>
-                )}
-            </Page>
-        );
-    }
-
-    private openNodeYaml(nodeId: string) {
-        const params = new URLSearchParams(this.appContext.router.route.location.search);
-        params.set('sidePanel', `yaml:${nodeId}`);
-        this.appContext.router.history.push(`${this.props.match.url}?${params.toString()}`);
-    }
-
-    private openContainerLogsPanel(nodeId: string, container: string) {
-        const params = new URLSearchParams(this.appContext.router.route.location.search);
-        params.set('sidePanel', `logs:${nodeId}:${container}`);
-        this.appContext.router.history.push(`${this.props.match.url}?${params.toString()}`);
-    }
-
-    private closeSidePanel() {
-        const params = new URLSearchParams(this.appContext.router.route.location.search);
-        params.delete('sidePanel');
-        this.appContext.router.history.push(`${this.props.match.url}?${params.toString()}`);
-    }
-
-    private selectTab(tab: string) {
-        this.appContext.router.history.push(`${this.props.match.url}?tab=${tab}&nodeId=${this.selectedNodeId}`);
-    }
-
-    private selectNode(nodeId: string) {
-        this.appContext.router.history.push(`${this.props.match.url}?tab=${this.selectedTabKey}&nodeId=${nodeId}`);
-    }
-
-    private removeNodeSelection() {
-        const params = new URLSearchParams(this.appContext.router.route.location.search);
-        params.delete('nodeId');
-        this.appContext.router.history.push(`${this.props.match.url}?${params.toString()}`);
-    }
-
-    private renderSummaryTab() {
-        if (!this.state.workflow) {
-            return <div>Loading...</div>;
-        }
-        return (
-            <div className='argo-container'>
-                <div className='workflow-details__content'>
-                    <WorkflowSummaryPanel workflow={this.state.workflow}/>
-                    {this.state.workflow.spec.arguments && this.state.workflow.spec.arguments.parameters && (
-                        <React.Fragment>
-                            <h6>Parameters</h6>
-                            <WorkflowParametersPanel parameters={this.state.workflow.spec.arguments.parameters}/>
-                        </React.Fragment>
-                    )}
-                    <h6>Artifacts</h6>
-                    <WorkflowArtifacts workflow={this.state.workflow}/>
-                </div>
-            </div>
-        );
-    }
-
-    private ensureUnsubscribed() {
-        if (this.changesSubscription) {
-            this.changesSubscription.unsubscribe();
-        }
-        this.changesSubscription = null;
-    }
-
-    private async loadWorkflow(namespace: string, name: string) {
-        try {
-            this.ensureUnsubscribed();
-            const workflowUpdates = Observable
-                .from([await services.workflows.get(namespace, name)])
-                .merge(services.workflows.watch({name, namespace}).map((changeEvent) => changeEvent.object));
-            this.changesSubscription = workflowUpdates.subscribe((workflow) => {
-                this.setState({ workflow });
-            });
-        } catch (e) {
-            this.appContext.apis.notifications.show({
-                content: 'Unable to load workflow',
-                type: NotificationType.Error,
-            });
-        }
-    }
-
-    private get appContext(): AppContext {
-        return this.context as AppContext;
-    }
-}

src/app/workflows/components/workflow-list-item/workflow-list-item.scss

@@ -1,96 +0,0 @@
-@import '../../../shared/styles/config';
-
-$ax-job-height: 150px;
-$ax-job-status-width: 220px;
-
-.workflow-list-item {
-    margin: 10px 0 20px 0;
-
-    &__top {
-        position: relative;
-        display: block;
-        font-size: 0.8em;
-        height: 36px;
-    }
-
-    &__content {
-        border-radius: $border-radius;
-        background-color: white;
-        box-shadow: 1px 1px 3px $argo-color-gray-5;
-        cursor: pointer;
-        position: relative;
-
-        &-menu {
-            position: absolute;
-            top: 20px;
-            right: 20px;
-
-            .ax-button--radius-2 {
-                i {
-                    padding-bottom: 0;
-                }
-            }
-        }
-
-        &:hover {
-            box-shadow: 1px 2px 3px rgba($argo-color-gray-9, .1), 0 0 0 1px rgba($argo-color-teal-5, .5);
-        }
-
-        &-box {
-            flex: 4;
-            border-top-left-radius: $border-radius;
-            border-bottom-left-radius: $border-radius;
-        }
-
-        &-details {
-            padding: 20px;
-            border-top-right-radius: $border-radius;
-            border-bottom-right-radius: $border-radius;
-            overflow-y: hidden;
-            height: 100%;
-            background-color: $argo-color-teal-1;
-
-            &-row {
-                margin-top: 10px;
-                font-size: .75em;
-                color: $argo-color-gray-6;
-
-                &-job-id {
-                    margin-right: 50px;
-                }
-            }
-
-            &--additional-space {
-                overflow: hidden;
-                padding-left: 20px;
-                padding-right: 20px;
-            }
-        }
-    }
-
-    &__status {
-        display: inline-block;
-        line-height: 18px;
-        width: 100%;
-        margin-top: 8px;
-        white-space: nowrap;
-
-        &-icon {
-            font-size: 18px;
-            display: inline-block;
-            height: 18px;
-            width: 18px;
-        }
-
-        &-message {
-            display: inline-block;
-            vertical-align: top;
-            color: $argo-color-gray-5;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            width: 100%;
-            padding-right: 20px;
-        }
-    }
-}

src/app/workflows/components/workflow-list-item/workflow-list-item.tsx

@@ -1,52 +0,0 @@
-import * as classNames from 'classnames';
-import * as React from 'react';
-
-import * as models from '../../../../models';
-import { Utils } from '../../../shared/components';
-
-import { WorkflowSteps } from '../workflow-steps/workflow-steps';
-
-require('./workflow-list-item.scss');
-
-export interface WorkflowListItemProps { workflow: models.Workflow; }
-
-export const WorkflowListItem = (props: WorkflowListItemProps) => (
-    <div className='workflow-list-item'>
-        <div className='workflow-list-item__top'>
-            <div className='workflow-list-item__status'>
-                <div className='workflow-list-item__status-icon'>
-                    <i className={classNames('fa', Utils.statusIconClasses(props.workflow.status.phase))}  aria-hidden='true'/>
-                </div>
-                <div className='workflow-list-item__status-message'>
-                    {props.workflow.metadata.creationTimestamp}
-                </div>
-            </div>
-        </div>
-
-        <div className='workflow-list-item__content'>
-            <div className='row collapse'>
-                <div className='columns medium-7'>
-                    <div className='workflow-list-item__content-box'>
-                        <WorkflowSteps workflow={props.workflow}/>
-                    </div>
-                </div>
-                <div className='columns medium-5'>
-                    <div className='workflow-list-item__content-details'>
-                        <div className='workflow-list-item__content-details-row row'>
-                            <div className='columns large-4'>NAME:</div>
-                            <div className='columns large-8'>{props.workflow.metadata.name}</div>
-                        </div>
-                        <div className='workflow-list-item__content-details-row row'>
-                            <div className='columns large-4'>NAMESPACE:</div>
-                            <div className='columns large-8'>{props.workflow.metadata.namespace}</div>
-                        </div>
-                        <div className='workflow-list-item__content-details-row row'>
-                            <div className='columns large-4'>CREATED AT:</div>
-                            <div className='columns large-8'>{props.workflow.metadata.creationTimestamp}</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-);

src/app/workflows/components/workflow-node-info/workflow-node-info.scss

@@ -1,65 +0,0 @@
-@import '../../../shared/styles/config';
-
-.workflow-node-info {
-
-    &__multi-line {
-        line-height: 24px;
-        display: inline-block;
-        vertical-align: middle;
-    }
-
-    &__artifact-details span {
-        padding-right: 0.5em;
-        padding-left: 0.5em;
-        border-left: 1px solid $argo-color-gray-5;
-
-        display: inline-block;
-        width: 33%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        line-height: 1em;
-
-        &:first-child {
-            padding-left: 0;
-            border-left: none;
-        }
-    }
-
-    &__containers {
-        position: relative;
-    }
-
-    &__sidecar-back {
-        position: absolute;
-        left: 16px;
-        top: 8px;
-        font-size: 2em !important;
-        z-index: 10;
-        height: 16px;
-        width: 16px;
-        cursor: pointer;
-        color: $argo-color-teal-5;
-    }
-
-    &__sidecar {
-        text-transform: uppercase;
-        border-top: 1px solid $argo-color-gray-5;
-        cursor: pointer;
-        font-size: 0.8em;
-
-        span {
-            color: $argo-color-teal-5;
-        }
-        
-        i {
-            float: right;
-            font-size: 1.5em;
-        }
-
-        &:last-child {
-            border-bottom: 1px solid $argo-color-gray-5;
-            padding: 1em 0;
-        }
-    }
-}

src/app/workflows/components/workflow-node-info/workflow-node-info.tsx

@@ -1,215 +0,0 @@
-import * as classNames from 'classnames';
-import * as moment from 'moment';
-import * as React from 'react';
-
-import * as models from '../../../../models';
-import { Duration, Tabs, Ticker, Utils } from '../../../shared/components';
-import { services } from '../../../shared/services';
-
-require('./workflow-node-info.scss');
-
-function nodeDuration(node: models.NodeStatus, now: moment.Moment) {
-    const endTime = node.finishedAt ? moment(node.finishedAt) : now;
-    return endTime.diff(moment(node.startedAt)) / 1000;
-}
-
-interface Props {
-    node: models.NodeStatus;
-    workflow: models.Workflow;
-    onShowContainerLogs?: (nodeId: string, container: string) => any;
-    onShowYaml?: (nodeId: string) => any;
-}
-
-const AttributeRow = (attr: { title: string, value: any }) => (
-    <div className='row white-box__details-row' key={attr.title}>
-        <div className='columns small-3'>
-            {attr.title}
-        </div>
-        <div className='columns small-9'>{attr.value}</div>
-    </div>
-);
-const AttributeRows = (props: { attributes: { title: string, value: any }[] }) => (
-    <div>
-        {props.attributes.map((attr) => <AttributeRow key={attr.title} {...attr}/>)}
-    </div>
-);
-
-export const WorkflowNodeSummary = (props: Props) => {
-    const attributes = [
-        {title: 'NAME', value: props.node.name},
-        {title: 'TYPE', value: props.node.type},
-        {title: 'PHASE', value: <span><i className={classNames('fa', Utils.statusIconClasses(props.node.phase))}  aria-hidden='true'/> {props.node.phase}</span>},
-        ...(props.node.message ? [{title: 'MESSAGE', value: <span className='workflow-node-info__multi-line'>{props.node.message}</span>}] : []),
-        {title: 'START TIME', value: props.node.startedAt},
-        {title: 'END TIME', value: props.node.finishedAt || '-'},
-        {title: 'DURATION', value: (
-            <Ticker disabled={props.workflow.status && props.workflow.status.phase !== models.NODE_PHASE.RUNNING}>
-                {(now) => <Duration durationMs={nodeDuration(props.node, now)}/>}
-            </Ticker>
-        ) },
-    ];
-    const template = props.workflow.spec.templates.find((item) => item.name === props.node.templateName);
-    return (
-        <div className='white-box'>
-            <div className='white-box__details'>
-                {<AttributeRows attributes={attributes}/>}
-            </div>
-            <div>
-                <button className='argo-button argo-button--base-o' onClick={() => props.onShowYaml && props.onShowYaml(props.node.id)}>
-                    YAML
-                </button> {template && (template.container || template.script) && (
-                    <button className='argo-button argo-button--base-o' onClick={() => props.onShowContainerLogs && props.onShowContainerLogs(props.node.id, 'main')}>
-                        LOGS
-                    </button>
-                )}
-            </div>
-        </div>
-    );
-};
-
-export const WorkflowNodeInputs = (props: { inputs: models.Inputs }) => {
-    const parameters = (props.inputs.parameters || []).map((artifact) => ({
-        title: artifact.name,
-        value: artifact.value,
-    }));
-    const artifacts = (props.inputs.artifacts || []).map((artifact) => ({
-        title: artifact.name,
-        value: artifact.path,
-    }));
-    return (
-        <div className='white-box'>
-            <div className='white-box__details'>
-                {parameters.length > 0 && [
-                    <div className='row white-box__details-row' key='title'>
-                        <p>Parameters</p>
-                    </div>,
-                    <AttributeRows key='attrs' attributes={parameters}/>,
-                ]}
-                {artifacts.length > 0 && [
-                    <div className='row white-box__details-row' key='title'>
-                        <p>Artifacts</p>
-                    </div>,
-                    <AttributeRows key='attrs' attributes={artifacts}/>,
-                ]}
-            </div>
-        </div>
-    );
-};
-
-export const WorkflowNodeContainer = (props: {
-        nodeId: string,
-        container: models.Container | models.Sidecar | models.Script,
-        onShowContainerLogs: (nodeId: string, container: string) => any;
-    }) => {
-    const container = { name: 'main', args: Array<string>(), source: '', ...props.container};
-    const attributes = [
-        {title: 'NAME', value: container.name || 'main'},
-        {title: 'IMAGE', value: container.image},
-        {title: 'COMMAND', value: <span className='workflow-node-info__multi-line'>{(container.command || []).join(' ')}</span>},
-        (container.source ?
-            {title: 'SOURCE', value: <span className='workflow-node-info__multi-line'>{container.source}</span>} :
-            {title: 'ARGS', value: <span className='workflow-node-info__multi-line'>{(container.args || []).join(' ')}</span>}
-        ),
-    ];
-    return (
-        <div className='white-box'>
-            <div className='white-box__details'>
-                {<AttributeRows attributes={attributes}/>}
-            </div>
-            <div>
-                <button className='argo-button argo-button--base-o' onClick={() => props.onShowContainerLogs && props.onShowContainerLogs(props.nodeId, container.name)}>
-                    LOGS
-                </button>
-            </div>
-        </div>
-    );
-};
-
-export class WorkflowNodeContainers extends React.Component<Props, { selectedSidecar: string }> {
-    constructor(props: Props) {
-        super(props);
-        this.state = { selectedSidecar: null };
-    }
-
-    public render() {
-        const template = this.props.workflow.spec.templates.find((item) => item.name === this.props.node.templateName);
-        if (!template || (!template.container && !template.script)) {
-            return (
-                <div className='white-box'>
-                    <div className='row'>
-                        <div className='columns small-12 text-center'>No data to display</div>
-                    </div>
-                </div>
-            );
-        }
-        const container = this.state.selectedSidecar && template.sidecars && template.sidecars.find((item) => item.name === this.state.selectedSidecar)
-            || template.container
-            || template.script;
-        return (
-            <div className='workflow-node-info__containers'>
-                {this.state.selectedSidecar && <i className='fa fa-angle-left workflow-node-info__sidecar-back' onClick={() => this.setState({ selectedSidecar: null })}/>}
-                <WorkflowNodeContainer nodeId={this.props.node.id} container={container} onShowContainerLogs={this.props.onShowContainerLogs}/>
-                {!this.state.selectedSidecar && template.sidecars && template.sidecars.length > 0 && (
-                    <div>
-                        <p>SIDECARS:</p>
-                        {template.sidecars.map((sidecar) => (
-                            <div className='workflow-node-info__sidecar' key={sidecar.name} onClick={() => this.setState({ selectedSidecar: sidecar.name })}>
-                                <span>{sidecar.name}</span> <i className='fa fa-angle-right'/>
-                            </div>
-                        ))}
-                    </div>
-                )}
-            </div>
-        );
-    }
-}
-
-export const WorkflowNodeArtifacts = (props: Props) => {
-    const artifacts = props.node.outputs && props.node.outputs.artifacts && props.node.outputs.artifacts.map((artifact) => Object.assign({}, artifact, {
-        downloadUrl: services.workflows.getArtifactDownloadUrl(props.workflow, props.node.id, artifact.name),
-        stepName: props.node.name,
-        dateCreated: props.node.finishedAt,
-        nodeName: props.node.name,
-    })) || [];
-    return (
-        <div className='white-box'>
-            {artifacts.length === 0 && (
-                <div className='row'>
-                    <div className='columns small-12 text-center'>No data to display</div>
-                </div>
-            )}
-            {artifacts.map((artifact) => (
-                <div className='row' key={artifact.path}>
-                    <div className='columns small-1'>
-                        <a href={artifact.downloadUrl}> <i className='icon argo-icon-artifact'/></a>
-                    </div>
-                    <div className='columns small-11'>
-                        <span className='title'>{artifact.name}</span>
-                        <div className='workflow-node-info__artifact-details'>
-                            <span title={artifact.nodeName} className='muted'>{artifact.nodeName}</span>
-                            <span title={artifact.path} className='muted'>{artifact.path}</span>
-                            <span title={artifact.dateCreated.toString()} className='muted'>{artifact.dateCreated}</span>
-                        </div>
-                    </div>
-                </div>
-            ))}
-        </div>
-    );
-};
-
-export const WorkflowNodeInfo = (props: Props) => (
-    <div className='workflow-node-info'>
-        <Tabs navCenter={true} navTransparent={true} tabs={[{
-            title: 'SUMMARY', key: 'summary', content: (
-                <div>
-                    <WorkflowNodeSummary {...props}/>
-                    {props.node.inputs && <WorkflowNodeInputs inputs={props.node.inputs} />}
-                </div>
-            ),
-        }, {
-            title: 'CONTAINERS', key: 'containers', content: <WorkflowNodeContainers {...props}/>,
-        }, {
-            title: 'ARTIFACTS', key: 'artifacts', content: <WorkflowNodeArtifacts {...props} />,
-        }]} />
-    </div>
-);

src/app/workflows/components/workflow-parameters-panel.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-
-import { Parameter } from '../../../models';
-
-export const WorkflowParametersPanel = (props: { parameters: Parameter[] }) => (
-    <div className='white-box'>
-        <div className='white-box__details'>
-            {props.parameters.map((param) => (
-                <div className='row white-box__details-row' key={param.name}>
-                    <div className='columns small-3'>
-                        {param.name}
-                    </div>
-                    <div className='columns small-9'>{param.value}</div>
-                </div>
-            ))}
-        </div>
-    </div>
-);

src/app/workflows/components/workflow-steps/workflow-steps.scss

@@ -1,136 +0,0 @@
-@import '../../../shared/styles/config';
-
-.workflow-steps {
-    float: left;
-    width: 100%;
-    margin: 0;
-
-    &__icon {
-        display: inline-block;
-        color: $argo-color-gray-5;
-        vertical-align: middle;
-
-        & > i {
-            font-size: 26px;
-            padding: 0 8px 0 16px;
-        }
-    }
-
-    &__description {
-        display: inline-block;
-        color: $argo-color-gray-6;
-        padding: 20px 0;
-
-        &-title {
-            font-weight: bolder;
-            font-size: 15px;
-            color: $argo-color-gray-6;
-            display: block;
-        }
-
-        &-des {
-            font-size: 12px;
-        }
-    }
-
-    &__title {
-        &-stepname {
-            color : $argo-color-gray-7;
-        }
-    }
-
-    &__timeline {
-        min-width: 645px;
-        overflow: hidden;
-        padding: 20px 58px;
-        white-space: nowrap;
-    }
-
-    &__step-dots {
-        margin-left: 10px;
-        display: inline-block;
-        position: relative;
-        width: 40px;
-
-        &::before {
-            position: absolute;
-            z-index: 1;
-            top: 12px;
-            height: 100%;
-            padding-left: 6px;
-            border-top: 1px dashed $argo-color-gray-3;
-            content: '';
-            width: 100%;
-        }
-    }
-
-    &__step {
-        display: inline-block;
-        position: relative;
-        width: 30%;
-
-        &-circle {
-            position: relative;
-            z-index: 2;
-            top: -2px;
-            width: 20px;
-            height: 20px;
-            margin: 0 auto;
-            border: 3px solid;
-            border-radius: 50%;
-            text-align: center;
-            background-color: white;
-            border-color: $argo-color-teal-6;
-
-            &--succeeded {
-                border-color: $argo-success-color;
-            }
-
-            &--failed {
-                border-color: $argo-failed-color;
-            }
-
-            &--running {
-                border-color: $argo-running-color;
-            }
-
-            &-small {
-                top: -1px;
-                width: 8px;
-                height: 8px;
-                display: inline-block;
-                border-width: 2px;
-                border-color: $argo-color-teal-6;
-            }
-        }
-
-        &-name {
-            text-align: center;
-            font-size: 13px;
-            color: $argo-color-gray-7;
-            height: 14px;
-        }
-
-        &::before {
-            position: absolute;
-            z-index: 1;
-            top: 8px;
-            height: 100%;
-
-            border-top: 1px dashed $argo-color-gray-3;
-            content: '';
-            width: 100%;
-        }
-
-        &:first-child::before {
-            width: 100%;
-            right: 0;
-        }
-
-        &:last-child::before {
-            width: 50%;
-            right: 0;
-            margin-right: 50%;
-        }
-    }
-}

src/app/workflows/components/workflow-steps/workflow-steps.tsx

@@ -1,56 +0,0 @@
-import * as classNames from 'classnames';
-import * as React from 'react';
-
-import * as models from '../../../../models';
-
-require('./workflow-steps.scss');
-
-export interface WorkflowStepsProps { workflow: models.Workflow; }
-
-export const WorkflowSteps = (props: WorkflowStepsProps) => {
-    const entryPointTemplate = props.workflow.spec.templates.find((template) => template.name === props.workflow.spec.entrypoint) || { steps: [] as models.WorkflowStep[][] };
-    const phase = props.workflow.status.phase;
-    let isSucceeded = false;
-    let isFailed = false;
-    let isRunning = false;
-    if (phase === models.NODE_PHASE.RUNNING) {
-        isRunning = true;
-    } else {
-        isSucceeded = phase === models.NODE_PHASE.SUCCEEDED;
-        isFailed = !isSucceeded;
-    }
-    const steps = (entryPointTemplate.steps || []).map((group) => group[0]).map((step) => ({ name: step.name, isSucceeded, isFailed, isRunning })).slice(0, 3);
-
-    return (
-    <div className='workflow-steps'>
-        <div className='workflow-steps__title'>
-            <div className='workflow-steps__icon'>
-                <i className='ax-icon-job' aria-hidden='true'/>
-            </div>
-            <div className='workflow-steps__description'>
-                <div className='workflow-steps__description-title'>{props.workflow.metadata.name}</div>
-            </div>
-        </div>
-        <div className='workflow-steps__timeline'>
-            <div className='workflow-steps__step-dots'>
-                <div className='workflow-steps__step-circle workflow-steps__step-circle-small'/>
-                <div className='workflow-steps__step-circle workflow-steps__step-circle-small'/>
-                <div className='workflow-steps__step-circle workflow-steps__step-circle-small'/>
-                <div className='workflow-steps__step-name'>&nbsp;</div>
-            </div>
-            {steps.map((step) => (
-                <div key={step.name} className={classNames('workflow-steps__step', {
-                        'workflow-steps__step--succeeded': step.isSucceeded,
-                        'workflow-steps__step--failed': step.isFailed,
-                        'workflow-steps__step--running': step.isRunning})}>
-                    <div className={classNames('workflow-steps__step-circle', {
-                            'workflow-steps__step-circle--succeeded': step.isSucceeded,
-                            'workflow-steps__step-circle--failed': step.isFailed,
-                            'workflow-steps__step-circle--running': step.isRunning})} />
-                    <div className='workflow-steps__step-name'>{step.name}</div>
-                </div>
-            ))}
-        </div>
-    </div>
-    );
-};

src/app/workflows/components/workflow-summary-panel.tsx

@@ -1,37 +0,0 @@
-import * as moment from 'moment';
-import * as React from 'react';
-
-import { NODE_PHASE, Workflow } from '../../../models';
-import { Duration, Ticker } from '../../shared/components';
-
-export const WorkflowSummaryPanel = (props: { workflow: Workflow }) => (
-    <Ticker disabled={props.workflow && props.workflow.status.phase !== NODE_PHASE.RUNNING}>
-        {(now) => {
-            const endTime = props.workflow.status.finishedAt ? moment(props.workflow.status.finishedAt) : now;
-            const duration = endTime.diff(moment(props.workflow.status.startedAt)) / 1000;
-
-            const attributes = [
-                {title: 'Status', value: props.workflow.status.phase},
-                {title: 'Name', value: props.workflow.metadata.name},
-                {title: 'Namespace', value: props.workflow.metadata.namespace},
-                {title: 'Started At', value: props.workflow.status.startedAt},
-                {title: 'Finished At', value: props.workflow.status.finishedAt || '-'},
-                {title: 'Duration', value: <Duration durationMs={duration}/>},
-            ];
-            return (
-                <div className='white-box'>
-                    <div className='white-box__details'>
-                        {attributes.map((attr) => (
-                            <div className='row white-box__details-row' key={attr.title}>
-                                <div className='columns small-3'>
-                                    {attr.title}
-                                </div>
-                                <div className='columns small-9'>{attr.value}</div>
-                            </div>
-                        ))}
-                    </div>
-                </div>
-            );
-        }}
-    </Ticker>
-);

src/app/workflows/components/workflow-timeline/workflow-timeline.scss

@@ -1,71 +0,0 @@
-@import '../../../shared/styles/config';
-
-.workflow-timeline {
-    position: relative;
-    background: white;
-
-    &__node-name {
-        width: 250px;
-        padding: 0 20px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    &__row {
-        position: relative;
-        line-height: 3em;
-        height: 3em;
-        border-bottom: 1px solid $argo-color-gray-4;
-
-        &--header {
-            background-color: $argo-color-gray-3;
-            height: 59px;
-        }
-
-        &--selected {
-            background-color: rgba($argo-color-teal-3, 0.2);
-        }
-    }
-
-    &__node {
-        z-index: 2;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        &--error, &--failed {
-            background-color: $argo-failed-color;
-        }
-
-        &--running {
-            background-color: $argo-running-color;
-        }
-   
-        &--succeeded {
-            background-color: $argo-success-color;
-        }
-
-        &--skipped {
-            background-color: $argo-color-gray-4;
-        }
-    }
-
-    &__start-line {
-        z-index: 1;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        width: 0;
-        border-right: 1px solid $argo-color-gray-4;
-
-        &__time {
-            left: -2.5em;
-            font-size: 0.8em;
-            position: absolute;
-            color: $argo-color-gray-5;
-        }
-    }
-    &__node, &__start-line {
-        transition: left 0.2s, top 0.2s, width 0.2s, height 0.2s;
-    }
-}

src/app/workflows/components/workflow-timeline/workflow-timeline.tsx

@@ -1,139 +0,0 @@
-import * as classNames from 'classnames';
-import * as moment from 'moment';
-import * as React from 'react';
-import { Observable, Subscription } from 'rxjs';
-
-import * as models from '../../../../models';
-import { Utils } from '../../../shared/components/utils';
-
-require('./workflow-timeline.scss');
-
-const ROUND_START_DIFF_MS = 1000;
-const NODE_NAME_WIDTH = 250;
-const MIN_WIDTH = 800;
-
-export interface WorkflowTimelineProps {
-    workflow: models.Workflow;
-    selectedNodeId: string;
-    nodeClicked?: (node: models.NodeStatus) => any;
-}
-
-export interface WorkflowTimelineState { parentWidth: number; now: moment.Moment; }
-
-export class WorkflowTimeline extends React.Component<WorkflowTimelineProps, WorkflowTimelineState> {
-
-    private container: HTMLElement;
-    private resizeSubscription: Subscription;
-    private refreshSubscription: Subscription;
-
-    constructor(props: WorkflowTimelineProps) {
-        super(props);
-        this.state = { parentWidth: 0, now: moment() };
-        this.ensureRunningWorkflowRefreshing(props.workflow);
-    }
-
-    public componentDidMount() {
-        this.resizeSubscription = Observable.fromEvent(window, 'resize').subscribe(() => this.updateWidth());
-        this.updateWidth();
-    }
-
-    public componentWillReceiveProps(nextProps: WorkflowTimelineProps) {
-        this.ensureRunningWorkflowRefreshing(nextProps.workflow);
-    }
-
-    public componentWillUnmount() {
-        if (this.resizeSubscription) {
-            this.resizeSubscription.unsubscribe();
-            this.resizeSubscription = null;
-        }
-        if (this.refreshSubscription) {
-            this.refreshSubscription.unsubscribe();
-            this.refreshSubscription = null;
-        }
-    }
-
-    public render() {
-        const nodes = Object.keys(this.props.workflow.status.nodes)
-                .map((id) => {
-                    const node = this.props.workflow.status.nodes[id];
-                    node.finishedAt = node.finishedAt || this.state.now.format();
-                    node.startedAt = node.startedAt || this.state.now.format();
-                    return node;
-                })
-                .filter((node) => node.startedAt && node.type === 'Pod')
-                .sort((first, second) => {
-                    const diff = moment(first.startedAt).diff(second.startedAt);
-                    // If node started almost at the same time then sort by end time
-                    if (diff <= 2) {
-                        return moment(first.finishedAt).diff(second.finishedAt);
-                    }
-                    return diff;
-                });
-        if (nodes.length === 0) {
-            return <div/>;
-        }
-        const timelineStart = moment(nodes[0].startedAt).valueOf();
-        const timelineEnd = nodes.map((node) => moment(node.finishedAt).valueOf()).reduce((first, second) => Math.max(first, second), moment(timelineStart).valueOf());
-
-        const timeToLeft = (time: number) => (time - timelineStart) / (timelineEnd - timelineStart) * Math.max(this.state.parentWidth, MIN_WIDTH) + NODE_NAME_WIDTH;
-        const groups = nodes.map((node) => ({
-            startedAt: moment(node.startedAt).valueOf(),
-            finishedAt: moment(node.finishedAt).valueOf(),
-            nodes: [Object.assign({}, node, {
-                left: timeToLeft(moment(node.startedAt).valueOf()),
-                width: timeToLeft(moment(node.finishedAt).valueOf()) - timeToLeft(moment(node.startedAt).valueOf()),
-            })],
-        }));
-        for (let i = groups.length - 1; i >= 1; i--) {
-            const cur = groups[i];
-            const next = groups[i - 1];
-            if (moment(cur.startedAt).diff(next.finishedAt, 'milliseconds') < 0 && moment(next.startedAt).diff(cur.startedAt, 'milliseconds') < ROUND_START_DIFF_MS) {
-                next.nodes = next.nodes.concat(cur.nodes);
-                next.finishedAt = nodes
-                    .map((node) => moment(node.finishedAt).valueOf())
-                    .reduce((first, second) => Math.max(first, second), next.finishedAt.valueOf());
-                groups.splice(i, 1);
-            }
-        }
-        return (
-            <div className='workflow-timeline' ref={(container) => this.container = container} style={{width: Math.max(this.state.parentWidth, MIN_WIDTH) + NODE_NAME_WIDTH}}>
-                <div style={{left: NODE_NAME_WIDTH}} className='workflow-timeline__start-line'/>
-                <div className='workflow-timeline__row workflow-timeline__row--header'/>
-                {groups.map((group) => [
-                    (<div style={{left: timeToLeft(group.startedAt)}} key={`group-${group.startedAt}`} className={classNames('workflow-timeline__start-line')}>
-                        <span className='workflow-timeline__start-line__time'>{moment(group.startedAt).format('hh:mm')}</span>
-                    </div>),
-                    ...group.nodes.map((node) => (
-                        <div key={node.id}
-                                className={classNames('workflow-timeline__row', { 'workflow-timeline__row--selected': node.id === this.props.selectedNodeId })}
-                                onClick={() => this.props.nodeClicked && this.props.nodeClicked(node)}>
-                            <div className='workflow-timeline__node-name'>
-                                <span title={Utils.shortNodeName(node)}>{Utils.shortNodeName(node)}</span>
-                            </div>
-                            <div style={{left: node.left, width: node.width}} className={`workflow-timeline__node workflow-timeline__node--${node.phase.toLocaleLowerCase()}`}/>
-                        </div>
-                    )),
-                ])}
-            </div>
-        );
-    }
-
-    public updateWidth() {
-        if (this.container) {
-            this.setState({ parentWidth: (this.container.offsetParent || window.document.body).clientWidth - NODE_NAME_WIDTH });
-        }
-    }
-
-    private ensureRunningWorkflowRefreshing(workflow: models.Workflow) {
-        const completedPhases = [models.NODE_PHASE.ERROR, models.NODE_PHASE.SUCCEEDED, models.NODE_PHASE.SKIPPED, models.NODE_PHASE.FAILED];
-        const isCompleted = workflow && workflow.status && (completedPhases.indexOf(workflow.status.phase) > -1);
-        if (!this.refreshSubscription && !isCompleted) {
-            this.refreshSubscription = Observable.interval(1000).subscribe(() => {
-                this.setState({ now: moment() });
-            });
-        } else if (this.refreshSubscription && isCompleted) {
-            this.refreshSubscription.unsubscribe();
-            this.refreshSubscription = null;
-        }
-    }
-}

src/app/workflows/components/workflow-yaml-viewer/workflow-yaml-viewer.scss

@@ -1,46 +0,0 @@
-@import '../../../shared/styles/config';
-
-.workflow-yaml-viewer {
-  font: normal 13px/1.2 'Courier', sans-serif;
-  color: $argo-color-gray-7;
-
-  &__highlight {
-    position: relative;
-    color: white;
-    background: $argo-color-teal-7;
-    display: inline-block;
-  }
-
-  & > ol {
-    margin: 0;
-    counter-reset: item;
-    list-style-type: none;
-    list-style-position: inside;
-    margin-bottom: 50px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    & > li {
-      height: 18px;
-      white-space: pre;
-
-      &.highlight {
-        color: white;
-        background-color: $argo-color-teal-7;
-      }
-
-      &:before {
-        width: 41px;
-        text-align: right;
-        display: inline-block;
-        color: $argo-color-gray-7;
-        background-color: $argo-color-gray-1;
-        content: counter(item);
-        counter-increment: item;
-        padding-right: 10px;
-      }
-    }
-  }
-}

src/app/workflows/components/workflow-yaml-viewer/workflow-yaml-viewer.tsx

@@ -1,133 +0,0 @@
-import * as React from 'react';
-import * as yaml from 'yamljs';
-
-import * as models from '../../../../models';
-import { Utils } from '../../../shared/components';
-
-require('./workflow-yaml-viewer.scss');
-
-export interface WorkflowYamlViewerProps {
-    workflow: models.Workflow; selectedNode: models.NodeStatus;
-}
-
-export class WorkflowYamlViewer extends React.Component<WorkflowYamlViewerProps> {
-
-    private container: HTMLElement;
-
-    public componentDidUpdate() {
-        this.scrollToHighlightedStep();
-    }
-
-    public componentDidMount() {
-        this.scrollToHighlightedStep();
-    }
-
-    public render() {
-        let nodeName = '';
-        if (this.props.selectedNode) {
-            nodeName = this.normalizeNodeName(this.props.selectedNode.displayName || this.props.selectedNode.name);
-        }
-        const html = this.props.workflow.spec.templates.map((item) => {
-            let itemStr = yaml.stringify(item, 4, 1);
-            if (nodeName) {
-                itemStr = this.highlightStep(item, nodeName, itemStr);
-            }
-            return this.addCounterToDisplayedFiles(itemStr);
-        }).join('\n\n');
-        return (
-            <div className='workflow-yaml-viewer' dangerouslySetInnerHTML={{ __html: html }} ref={(container) => this.container = container} />
-        );
-    }
-
-    private addCounterToDisplayedFiles(multilineString: string): string {
-        const newMultilineStringWithCounters: string[] = ['<ol>'];
-        multilineString
-            .split('\n')
-            .forEach((item) => {
-                if (item !== '') {
-                    if (item.indexOf('<span>') !== -1) {
-                        item = item.match(/^<span>\s*/)[0] + item.substr(6);
-                        item = `<li class="highlight">${item}</li>`;
-                    } else {
-                        item = item.match(/^\s*/)[0] + item;
-                        // special treatment to beautify resource templates
-                        if (item.replace(/\s+/g, '').substr(0, 8) === 'manifest') {
-                            this.formatManifest(item, newMultilineStringWithCounters);
-                            return;
-                        }
-                        item = `<li>${item}</li>`;
-                    }
-                }
-                newMultilineStringWithCounters.push(item);
-            });
-        newMultilineStringWithCounters.push('</ol>');
-        return newMultilineStringWithCounters.join('\n');
-    }
-
-    private highlightStep(template: models.Template, highlightedStepName: string, yamlString: string) {
-        let firstLineStepToHighlight: string = null;
-        let lastLineStepToHighlight: string = null;
-        const steps: (models.WorkflowStep | models.DAGTask)[] = template.dag && template.dag.tasks || (template.steps || []).reduce((first, second) => first.concat(second), []);
-        const step = steps.find((item) => item.name === highlightedStepName);
-        if (step) {
-            const stepLines = yaml
-                .stringify(step, 1, 1)
-                .split('\n');
-            firstLineStepToHighlight = `name: ${highlightedStepName}`;
-            lastLineStepToHighlight = stepLines[stepLines.length - 2];
-        }
-
-        if (firstLineStepToHighlight && lastLineStepToHighlight) {
-            let newYamlString = '';
-            let isLinePartOfStepToHighlight = false;
-
-            yamlString
-                .split('\n')
-                .forEach((line: string, index) => {
-                    if (line.indexOf(firstLineStepToHighlight) !== -1) {
-                        isLinePartOfStepToHighlight = true;
-                    }
-                    if (isLinePartOfStepToHighlight) {
-                        newYamlString = `${newYamlString}<span>${line}</span>\n`;
-                        if (line.indexOf(lastLineStepToHighlight) > -1) {
-                            isLinePartOfStepToHighlight = false;
-                        }
-                    } else {
-                        newYamlString = `${newYamlString}${line}\n`;
-                    }
-                });
-
-            yamlString = newYamlString;
-        }
-        return yamlString;
-    }
-
-    private normalizeNodeName(name: string) {
-        const parts = name.replace(/([(][^)]*[)])/g, '').split('.');
-        return parts[parts.length - 1];
-    }
-
-    private scrollToHighlightedStep() {
-        if (this.props.selectedNode) {
-            setTimeout(() => {
-                const viewerHighlight = this.container.querySelector('li.highlight') as HTMLElement;
-                if (viewerHighlight) {
-                    const parent = Utils.getScrollParent(viewerHighlight);
-                    Utils.scrollTo(
-                        parent, viewerHighlight.offsetTop + parent.scrollTop - window.pageYOffset - parent.clientHeight / 2);
-                }
-            });
-        }
-    }
-
-    private formatManifest(item: string, newMultilineStringWithCounters: string[]) {
-        const index = item.indexOf('manifest:');
-        item = item.substr(0, index + 10) + '\\n' + item.substr(index + 10);
-        item = item.replace(/"/, '');
-        item = item.replace(/\\"/g, '"');
-        newMultilineStringWithCounters.push(`<li>${item.substr(0, index)}manifest: |`);
-        item.split('\\n').slice(1).slice(0, -1).forEach((line) => {
-            newMultilineStringWithCounters.push(`<li>${item.substr(0, index)}  ${line}</li>`);
-        });
-    }
-}

src/app/workflows/components/workflows-container.tsx

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { Route, RouteComponentProps, Switch } from 'react-router';
-import { WorkflowDetails } from './workflow-details/workflow-details';
-import { WorkflowsList } from './workflows-list/workflows-list';
-
-export const WorkflowsContainer = (props: RouteComponentProps<any>) => (
-    <Switch>
-        <Route exact={true} path={`${props.match.path}`} component={WorkflowsList}/>
-        <Route exact={true} path={`${props.match.path}/:namespace/:name`} component={WorkflowDetails}/>
-    </Switch>
-);

src/app/workflows/components/workflows-list/workflows-list.tsx

@@ -1,88 +0,0 @@
-import * as PropTypes from 'prop-types';
-import * as React from 'react';
-import { Link, RouteComponentProps } from 'react-router-dom';
-import { Observable } from 'rxjs';
-
-import * as models from '../../../../models';
-import { uiUrl } from '../../../shared/base';
-import { DataLoader, MockupList, Page, TopBarFilter } from '../../../shared/components';
-import { AppContext } from '../../../shared/context';
-import { services } from '../../../shared/services';
-
-import { WorkflowListItem } from '../workflow-list-item/workflow-list-item';
-
-export class WorkflowsList extends React.Component<RouteComponentProps<any>> {
-
-    public static contextTypes = {
-        router: PropTypes.object,
-        apis: PropTypes.object,
-    };
-
-    private get phases() {
-        return new URLSearchParams(this.props.location.search).getAll('phase');
-    }
-
-    public render() {
-        const filter: TopBarFilter<string> = {
-            items: Object.keys(models.NODE_PHASE).map((phase) => ({
-                value: (models.NODE_PHASE as any)[phase],
-                label: (models.NODE_PHASE as any)[phase],
-            })),
-            selectedValues: this.phases,
-            selectionChanged: (phases) => {
-                const query = phases.length > 0 ? '?' + phases.map((phase) => `phase=${phase}`).join('&') : '';
-                this.appContext.router.history.push(uiUrl(`workflows${query}`));
-            },
-        };
-        return (
-            <Page title='Workflows' toolbar={{filter, breadcrumbs: [{ title: 'Workflows', path: uiUrl('workflows') }]}}>
-                <div className='argo-container'>
-                    <div className='stream'>
-                        <DataLoader
-                                input={this.phases}
-                                load={(phases) => {
-                                    return Observable.fromPromise(services.workflows.list(phases)).flatMap((workflows) =>
-                                        Observable.merge(
-                                            Observable.from([workflows]),
-                                            services.workflows.watch(phases).map((workflowChange) => {
-                                                const index = workflows.findIndex((item) => item.metadata.name === workflowChange.object.metadata.name);
-                                                if (index > -1 && workflowChange.object.metadata.resourceVersion === workflows[index].metadata.resourceVersion) {
-                                                    return {workflows, updated: false};
-                                                }
-                                                switch (workflowChange.type) {
-                                                    case 'DELETED':
-                                                        if (index > -1) {
-                                                            workflows.splice(index, 1);
-                                                        }
-                                                        break;
-                                                    default:
-                                                        if (index > -1) {
-                                                            workflows[index] = workflowChange.object;
-                                                        } else {
-                                                            workflows.unshift(workflowChange.object);
-                                                        }
-                                                        break;
-                                                }
-                                                return {workflows, updated: true};
-                                            }).filter((item) => item.updated).map((item) => item.workflows)),
-                                    );
-                                }}
-                                loadingRenderer={() => <MockupList height={150} marginTop={30}/>}>
-                            {(workflows: models.Workflow[]) => workflows.map((workflow) => (
-                                <div key={workflow.metadata.name}>
-                                    <Link to={uiUrl(`workflows/${workflow.metadata.namespace}/${workflow.metadata.name}`)}>
-                                    <WorkflowListItem workflow={workflow}/>
-                                    </Link>
-                                </div>
-                            ))}
-                        </DataLoader>
-                    </div>
-                </div>
-            </Page>
-        );
-    }
-
-    private get appContext(): AppContext {
-        return this.context as AppContext;
-    }
-}

src/app/workflows/index.ts

@@ -1,5 +0,0 @@
-import { WorkflowsContainer } from './components/workflows-container';
-
-export default {
-    component: WorkflowsContainer,
-};

src/components/autocomplete/autocomplete-field.tsx

@@ -0,0 +1,47 @@
+import {default as classNames} from 'classnames';
+import * as React from 'react';
+import * as ReactForm from 'react-form';
+
+import {Autocomplete, AutocompleteOption, AutocompleteProps} from './autocomplete';
+
+export const AutocompleteField = ReactForm.FormField((props: AutocompleteProps & {fieldApi: ReactForm.FieldApi; className?: string}) => {
+    const {fieldApi: {getValue, setValue, setTouched}, ...rest} = props;
+    const value = getValue();
+
+    const [forceHasValue, setForceHasValue] = React.useState(false);
+
+    return (
+        <Autocomplete
+            wrapperProps={{className: classNames(props.className, {'argo-has-value': forceHasValue})}}
+            onSelect={(_, item) => {
+                setValue(item.value);
+            }}
+            inputProps={{
+                className: props.className,
+                style: {borderBottom: 'none', position: 'unset'},
+            }}
+            value={value}
+            renderInput={(inputProps) => (
+                <input
+                    {...inputProps}
+                    qe-id={props.qeid}
+                    onFocus={(e) => {
+                        if (inputProps.onFocus) {
+                            inputProps.onFocus(e);
+                        }
+                        setForceHasValue(true);
+                    }}
+                    onBlur={(e) => {
+                        if (inputProps.onBlur) {
+                            inputProps.onBlur(e);
+                        }
+                        setForceHasValue(false);
+                        setTouched(true);
+                    }}
+                />
+            )}
+            onChange={(val) => setValue(val.target.value)}
+            {...rest}
+        />
+    );
+}) as React.ComponentType<ReactForm.FieldProps & {items: (AutocompleteOption | string)[]; className?: string; filterSuggestions?: boolean}>;

src/components/autocomplete/autocomplete.scss

@@ -0,0 +1,7 @@
+.autocomplete {
+  &__items__item {
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+}

src/components/autocomplete/autocomplete.tsx

@@ -0,0 +1,131 @@
+import {default as classNames} from 'classnames';
+import {CSSProperties, ReactNode} from 'react';
+import * as React from 'react';
+import ReactAutocomplete from 'react-autocomplete';
+
+require('./autocomplete.scss');
+export interface AutocompleteApi {
+    refresh(): any;
+}
+
+export interface AutocompleteOption {
+    value: string;
+    label?: string;
+}
+
+export interface AutocompleteProps {
+    items: (AutocompleteOption | string)[];
+    value?: string;
+    inputProps?: React.HTMLProps<HTMLInputElement>;
+    wrapperProps?: React.HTMLProps<HTMLDivElement>;
+    renderInput?: (props: React.HTMLProps<HTMLInputElement>) => React.ReactNode;
+    renderItem?: (item: AutocompleteOption) => React.ReactNode;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>, value: string) => void;
+    onSelect?: (value: string, item: any) => void;
+    autoCompleteRef?: (api: AutocompleteApi) => any;
+    filterSuggestions?: boolean;
+    qeid?: string;
+    /** @default true */ // per https://github.com/reactjs/react-autocomplete/blob/41388f7d7760bf6cf38e7946e43d4fddd9c7c176/lib/Autocomplete.js#L188
+    autoHighlight?: ReactAutocomplete.Props['autoHighlight'];
+}
+
+export const Autocomplete = (props: AutocompleteProps) => {
+    const items = (props.items || []).map((item) => {
+        if (typeof item === 'string') {
+            return {value: item, label: item};
+        } else {
+            return {
+                value: item.value,
+                label: item.label || item.value,
+            };
+        }
+    });
+    const [autocompleteEl, setAutocompleteEl] = React.useState(null);
+
+    React.useEffect(() => {
+        const listener = (event: any) => {
+            // Recalculate menu position on scroll
+            if (autocompleteEl && autocompleteEl.refs.input && autocompleteEl.refs.menu && !(event.target === autocompleteEl.refs.menu)) {
+                autocompleteEl.setMenuPositions();
+            }
+        };
+        document.addEventListener('scroll', listener, true);
+        return () => {
+            document.removeEventListener('scroll', listener);
+        };
+    });
+
+    const wrapperProps = props.wrapperProps || {};
+    wrapperProps.className = classNames('select', wrapperProps.className);
+    return (
+        <ReactAutocomplete
+            autoHighlight={props.autoHighlight}
+            ref={(el: any) => {
+                if (el) {
+                    if (el.refs.input) {
+                        // workaround for 'autofill for forms not deactivatable' https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7
+                        (el.refs.input as HTMLInputElement).autocomplete = 'no-autocomplete';
+                    }
+                    if (!el.setMenuPositionsOverridden) {
+                        el.setMenuPositionsOverridden = true;
+                        el.setMenuPositions = () => {
+                            // Overridden setMenuPositions implementation: expands menu to the top if there is not enough space below the input but enough above it.
+                            if (el.refs.menu && el.refs.input) {
+                                const node = el.refs.input;
+                                const rect = node.getBoundingClientRect();
+                                const computedStyle = window.getComputedStyle(node);
+                                const marginBottom = parseInt(computedStyle.marginBottom, 10) || 0;
+                                const marginLeft = parseInt(computedStyle.marginLeft, 10) || 0;
+                                const marginRight = parseInt(computedStyle.marginRight, 10) || 0;
+                                let menuTop = rect.bottom + marginBottom;
+                                if (window.innerHeight - (menuTop + el.refs.menu.offsetHeight) < 0) {
+                                    const correctedTop = menuTop - el.refs.menu.offsetHeight - el.refs.input.offsetHeight;
+                                    if (correctedTop > 0) {
+                                        menuTop = correctedTop;
+                                    }
+                                }
+                                el.setState({
+                                    menuTop,
+                                    menuLeft: rect.left + marginLeft,
+                                    menuWidth: rect.width + marginLeft + marginRight,
+                                });
+                            }
+                        };
+                    }
+                }
+                setAutocompleteEl(el);
+                if (props.autoCompleteRef) {
+                    props.autoCompleteRef({
+                        refresh: () => {
+                            if (el && el.refs.input) {
+                                el.setMenuPositions();
+                            }
+                        },
+                    });
+                }
+            }}
+            inputProps={props.inputProps}
+            wrapperProps={wrapperProps}
+            shouldItemRender={(item: AutocompleteOption, val: string) => {
+                return !props.filterSuggestions || item.label.toLowerCase().includes(val.toLowerCase());
+            }}
+            renderMenu={function(menuItems: ReactNode[], _: string, style: CSSProperties) {
+                if (menuItems.length === 0) {
+                    return <div style={{display: 'none'}} />;
+                }
+                return <div style={{...style, ...this.menuStyle, background: 'white', zIndex: 20, maxHeight: '20em'}}>{menuItems}</div>;
+            }}
+            getItemValue={(item: any) => item.label}
+            items={items}
+            value={props.value}
+            renderItem={(item: any, isSelected: boolean) => (
+                <div className={classNames('select__option', {selected: isSelected})} key={item.label}>
+                    {(props.renderItem && props.renderItem(item)) || item.label}
+                </div>
+            )}
+            onChange={props.onChange}
+            onSelect={props.onSelect}
+            renderInput={props.renderInput}
+        />
+    );
+};

src/components/checkbox.spec.tsx

@@ -0,0 +1,36 @@
+import {shallow} from 'enzyme';
+import * as React from 'react';
+import {Checkbox} from './checkbox';
+
+describe('Checkbox', () => {
+    it('should invoke onChange when clicked', () => {
+        const onChange = jest.fn();
+
+        const checkbox = shallow(<Checkbox checked={true} onChange={onChange} />);
+
+        checkbox.find('input').simulate('change');
+
+        expect(onChange).toHaveBeenCalledWith(false);
+    });
+
+    it.each([true, false])('should render the checkbox with the correct value (%s)', (checked) => {
+        const checkbox = shallow(<Checkbox checked={checked} />);
+        expect(checkbox.find('input').filterWhere((item) => item.prop('checked') === checked).length).toBe(1);
+    });
+
+    it('should set the id of the resulting input', () => {
+        const checkbox = shallow(<Checkbox id={'foo'} />);
+
+        expect(checkbox.find('input').is('#foo')).toBe(true);
+        checkbox.setProps({id: 'bar'});
+        expect(checkbox.find('input').is('#bar')).toBe(true);
+    });
+
+    it('should set disabled of the resulting input', () => {
+        const checkbox = shallow(<Checkbox disabled={true} />);
+
+        expect(checkbox.find('input').filterWhere((item) => item.prop('disabled') === true).length).toBe(1);
+        checkbox.setProps({disabled: false});
+        expect(checkbox.find('input').filterWhere((item) => item.prop('disabled') === false).length).toBe(1);
+    });
+});

src/components/data-loader.spec.tsx

@@ -0,0 +1,67 @@
+import {shallow} from 'enzyme';
+import * as React from 'react';
+import {DataLoader} from './data-loader';
+
+describe('DataLoader', () => {
+    it('should support excluding the input from parameters', async () => {
+        const promise = Promise.resolve('foo');
+
+        const dataLoader = shallow(
+            <DataLoader load={() => promise}>
+            {(result) => (
+                <p>{result}</p>
+            )}
+            </DataLoader>,
+        );
+
+        await promise;
+
+        // Wait one additional tick of the event loop to ensure that the data loader
+        // component has has an opportunity to render
+        await new Promise((resolve) => setImmediate(resolve));
+
+        expect(dataLoader.find('p').text()).toBe('foo');
+    });
+
+    it('should require the load fn to accept an argument if input is provided', async () => {
+        const promise = Promise.resolve('foo');
+        const loadFn = jest.fn<Promise<string>, [string]>().mockReturnValue(promise);
+
+        const dataLoader = shallow(
+            <DataLoader load={loadFn} input='bar'>
+            {(result) => (
+                <p>{result}</p>
+            )}
+            </DataLoader>,
+        );
+
+        await promise;
+
+        // Wait one additional tick of the event loop to ensure that the data loader
+        // component has has an opportunity to render
+        await new Promise((resolve) => setImmediate(resolve));
+
+        expect(loadFn).toHaveBeenCalledWith('bar');
+        expect(dataLoader.find('p').text()).toBe('foo');
+    });
+
+    it('should not require the loadFn to accept the input is provided', async () => {
+        const promise = Promise.resolve('foo');
+
+        const dataLoader = shallow(
+            <DataLoader load={() => promise} input='bar'>
+            {(result) => (
+                <p>{result}</p>
+            )}
+            </DataLoader>,
+        );
+
+        await promise;
+
+        // Wait one additional tick of the event loop to ensure that the data loader
+        // component has has an opportunity to render
+        await new Promise((resolve) => setImmediate(resolve));
+
+        expect(dataLoader.find('p').text()).toBe('foo');
+    });
+});

src/components/data-loader.tsx

@@ -4,17 +4,34 @@ import { Observable, Subscription } from 'rxjs';
 import { AppContext } from '../context';
 import { ErrorNotification } from './error-notification';
 import { NotificationType } from './notifications/notifications';
+import { isPromise } from './utils';
 
-interface LoaderProps<I, D> {
-    load: (input: I) => Promise<D> | Observable<D>;
-    input?: I;
+interface LoaderProps<TInput, TResult> {
+    load: (input: TInput) => Promise<TResult> | Observable<TResult>;
+    input: TInput;
     noLoaderOnInputChange?: boolean;
     loadingRenderer?: React.ComponentType;
     errorRenderer?: (children: React.ReactNode) => React.ReactNode;
-    children: (data: D) => React.ReactNode;
+    children: (data: TResult) => React.ReactNode;
 }
 
-export class DataLoader<D = {}, I = {}> extends React.Component<LoaderProps<I, D>, { loading: boolean; dataWrapper: { data: D }; error: boolean; input: I; inputChanged: boolean}> {
+interface LoaderPropsNoInput<TResult> {
+    load: () => Promise<TResult> | Observable<TResult>;
+    noLoaderOnInputChange?: boolean;
+    loadingRenderer?: React.ComponentType;
+    errorRenderer?: (children: React.ReactNode) => React.ReactNode;
+    children: (data: TResult) => React.ReactNode;
+}
+
+interface LoaderState<TInput, TResult> {
+  loading: boolean;
+  dataWrapper: { data: TResult } | null;
+  error: boolean;
+  input: TInput;
+  inputChanged: boolean;
+}
+
+export class DataLoader<D = any, I = undefined> extends React.Component<LoaderProps<I, D> | LoaderPropsNoInput<D>, LoaderState<I, D>> {
     public static contextTypes = {
         router: PropTypes.object,
         apis: PropTypes.object,
@@ -27,7 +44,7 @@ export class DataLoader<D = {}, I = {}> extends React.Component<LoaderProps<I, D
         return null;
     }
 
-    private subscription: Subscription;
+    private subscription: Subscription | null = null;
     private unmounted = false;
 
     constructor(props: LoaderProps<I, D>) {
@@ -72,22 +89,33 @@ export class DataLoader<D = {}, I = {}> extends React.Component<LoaderProps<I, D
     }
 
     public reload() {
-        this.setState({ dataWrapper: null, error: false });
+        this.setState({ dataWrapper: null, error: false, inputChanged: true });
     }
 
     private async loadData() {
-        if (!this.state.error && !this.state.loading && (this.state.dataWrapper == null || this.state.inputChanged)) {
+        if (!this.state.error && !this.state.loading && this.state.dataWrapper == null || this.state.inputChanged) {
             this.setState({ error: false, loading: true, inputChanged: false, dataWrapper: this.props.noLoaderOnInputChange ? this.state.dataWrapper : null });
             try {
-                const res = this.props.load(this.props.input);
-                if ((res as Promise<D>).then) {
-                    const data = await (res as Promise<D>);
+                const res = 'input' in this.props ? this.props.load(this.props.input) : this.props.load();
+
+                if (isPromise(res)) {
+                    const data = await res;
                     if (!this.unmounted) {
                         this.setState({ dataWrapper: { data }, loading: false });
                     }
                 } else {
                     this.ensureUnsubscribed();
-                    this.subscription = (res as Observable<D>).subscribe((data: D) => this.setState({ loading: false, dataWrapper: { data } }), (e) => this.handleError(e));
+                    this.subscription = res.subscribe((data: D) => {
+                        this.setState({ loading: false, dataWrapper: { data } });
+                    }, (e) => {
+                        this.handleError(e);
+                    }, () => {
+                        if (this.state.loading) {
+                            // observable might complete before returning any data
+                            // make sure to reset loading state
+                            this.setState({ loading: false, dataWrapper: { data: this.state.dataWrapper?.data } });
+                        }
+                    });
                 }
             } catch (e) {
                 this.handleError(e);

src/components/dropdown-menu.tsx

@@ -10,6 +10,7 @@ export interface MenuItem {
 export interface DropDownMenuProps {
     items: MenuItem[];
     anchor: React.ComponentType;
+    qeId?: string;
 }
 
 export class DropDownMenu extends React.PureComponent<DropDownMenuProps> {
@@ -18,9 +19,9 @@ export class DropDownMenu extends React.PureComponent<DropDownMenuProps> {
 
     public render() {
         return (
-            <DropDown anchor={this.props.anchor} isMenu={true} ref={(dropdown: any) => this.dropdown = dropdown}>
+            <DropDown anchor={this.props.anchor} isMenu={true} ref={(dropdown: any) => this.dropdown = dropdown} qeId={this.props.qeId}>
                 <ul>
-                    {this.props.items.map((item, i) => <li
+                    {this.props.items.map((item, i) => <li qe-id={this.props.qeId + `-` + item.title}
                         onClick={(event) => this.onItemClick(item, event)} key={i}>
                         {item.iconClassName && <i className={item.iconClassName}/>} {item.title}
                         </li>)}

src/components/dropdown/dropdown.tsx

@@ -1,12 +1,15 @@
-import * as classNames from 'classnames';
+import {default as classNames} from 'classnames';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+import { BehaviorSubject, fromEvent, merge, Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
 
 export interface DropDownProps {
     isMenu?: boolean;
     anchor: React.ComponentType;
     children: React.ReactNode | (() => React.ReactNode);
+    qeId?: string;
+    onOpenStateChange?: (open: boolean) => void;
 }
 
 export interface DropDownState {
@@ -42,7 +45,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
 
         return (
             <div className='argo-dropdown' ref={(el) => this.el = el}>
-                <div className='argo-dropdown__anchor' onClick={(event) => { this.open(); event.stopPropagation(); }}>
+                <div qe-id={this.props.qeId} className='argo-dropdown__anchor' onClick={(event) => { this.open(); event.stopPropagation(); }}>
                     <this.props.anchor/>
                 </div>
                 {ReactDOM.createPortal((
@@ -56,15 +59,16 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
         );
     }
 
-    public componentWillMount() {
-        this.subscriptions = [Observable.merge(
-            dropDownOpened.filter((dropdown) => dropdown !== this),
-            Observable.fromEvent(document, 'click').filter((event: Event) => {
-                return this.content && this.state.opened && !this.content.contains(event.target as Node) && !this.el.contains(event.target as Node);
-            }),
+    public UNSAFE_componentWillMount() {
+        this.subscriptions = [merge(
+            dropDownOpened.pipe(filter((dropdown) => dropdown !== this)),
+            fromEvent(document, 'click').pipe(filter((event: Event) => {
+                const targetAttached = (event.target as Node).parentElement;
+                return targetAttached && this.content && this.state.opened && !this.content.contains(event.target as Node) && !this.el.contains(event.target as Node);
+            })),
         ).subscribe(() => {
             this.close();
-        }), Observable.fromEvent(document, 'scroll', true).subscribe(() => {
+        }), fromEvent(document, 'scroll', {passive: true}).subscribe(() => {
             if (this.state.opened && this.content && this.el) {
                 this.setState(this.refreshState());
             }
@@ -78,6 +82,9 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
 
     public close() {
         this.setState({ opened: false });
+        if (this.props.onOpenStateChange) {
+            this.props.onOpenStateChange(false);
+        }
     }
 
     private refreshState() {
@@ -110,6 +117,8 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
         const newState = this.refreshState();
         newState.opened = true;
         this.setState(newState);
-        dropDownOpened.next(this);
+        if (this.props.onOpenStateChange) {
+            this.props.onOpenStateChange(true);
+        }
     }
 }

src/components/duration.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+import { formatDuration } from '../../v2';
+
+/**
+ * Output a string duration from a number of seconds
+ *
+ * @param {number} props.durationS - The number of seconds.
+ */
+export function Duration(props: {durationS: number}) {
+    return <span>{formatDuration(props.durationS, 2)}</span>;
+}

src/components/form-field/form-field.tsx

@@ -1,10 +1,10 @@
-import * as classNames from 'classnames';
+import {default as classNames} from 'classnames';
 import * as React from 'react';
 import * as ReactForm from 'react-form';
 
 import { Select as ArgoSelect, SelectOption, SelectProps } from '../select/select';
 
-const uuid = require('uuid/v1');
+import { v1 as uuid } from 'uuid';
 
 require('./form-field.scss');
 
@@ -23,6 +23,7 @@ export const FormField: <E, T extends ReactForm.FieldProps & { className?: strin
         formApi: ReactForm.FormApi,
         component: React.ComponentType<T>,
         componentProps?: T,
+        qeId?: string;
     },
 ) => React.ReactElement<E> = (props) => {
     const [id] = React.useState(uuid());
@@ -34,6 +35,7 @@ export const FormField: <E, T extends ReactForm.FieldProps & { className?: strin
             <FormComponent
                 {...props.componentProps || {}}
                 id={id}
+                qeid={props.qeId}
                 field={props.field}
                 className={classNames({ 'argo-field': true, 'argo-has-value': !!getNestedField(props.formApi.values, props.field) })}/>
 

src/components/help-icon/help-icon.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import {Tooltip} from '../tooltip/tooltip';
+
+export const HelpIcon = ({title}: {title: React.ReactChild | React.ReactChild[]}) => (
+    <Tooltip content={title}>
+        <span style={{fontSize: 'smaller'}}>
+            {' '}
+            <i className='fa fa-question-circle help-tip' />
+        </span>
+    </Tooltip>
+);

src/components/index.ts

@@ -2,13 +2,13 @@ require('../styles/main.scss');
 
 export { Utils  } from './utils';
 export { Layout } from './layout/layout';
-export { Page, PageContext, PageContextProps } from './page/page';
+export { Page, PageContext, type PageContextProps } from './page/page';
 export { MockupList } from './mockup-list/mockup-list';
 export { DropDown } from './dropdown/dropdown';
-export { DropDownMenu, DropDownMenuProps, MenuItem } from './dropdown-menu';
+export { DropDownMenu, type DropDownMenuProps, type MenuItem } from './dropdown-menu';
 export { Checkbox } from './checkbox';
-export { TopBarProps, Toolbar, TopBarFilter } from './top-bar/top-bar';
-export { Tab, Tabs } from './tabs/tabs';
+export { type TopBarProps, type Toolbar, type TopBarFilter } from './top-bar/top-bar';
+export { type Tab, Tabs } from './tabs/tabs';
 export { Duration } from './duration';
 export { SlidingPanel } from './sliding-panel/sliding-panel';
 export { LogsViewer } from './logs-viewer/logs-viewer';
@@ -16,10 +16,14 @@ export * from './notifications/notifications';
 export * from './notifications/notification-manager';
 export * from './popup/popup';
 export * from './popup/popup-manager';
-export { Select, SelectOption, SelectProps } from './select/select';
+export { Select, type SelectOption, type SelectProps } from './select/select';
+export { HelpIcon } from './help-icon/help-icon';
 export { Tooltip } from './tooltip/tooltip';
 export * from './ticker';
 export * from './data-loader';
 export * from './error-notification';
 export * from './navigation';
 export * from './form-field';
+export * from './slide-contents/slide-contents';
+export * from './autocomplete/autocomplete';
+export * from './autocomplete/autocomplete-field';

src/components/layout/layout.scss

@@ -1,9 +1,15 @@
 @import '../../styles/config';
+@import '../../styles/theme';
 
 .layout {
     overflow: hidden;
+    @include themify($themes) {
+        background-color: themed('background-1');
+    }
     &__loader {
-        background-color: rgba($argo-color-gray-7, 0.4);
+        @include themify($themes) {
+            background-color: themed('layout-loader-bg');
+        }
         position: fixed;
         left: 0;
         top: 0;