Merge cadence

Dockerfile

@@ -1,6 +1,8 @@
 FROM node:8.17.0-jessie as builder
 
 WORKDIR /usr/build
+ENV NODE_ENV=production
+ENV NPM_CONFIG_PRODUCTION=true
 
 # Install app dependencies
 COPY package*.json ./
@@ -16,7 +18,6 @@ RUN mkdir -p ./app/protobuf/src && mv protobuf/src ./app/protobuf
 # Build final image
 FROM node:8.17.0-jessie-slim
 WORKDIR /usr/app
-ENV NODE_ENV=production
 COPY --from=builder ./usr/build/app ./
 EXPOSE 8088
 CMD [ "node", "server.js" ]

.babelrc → babel.config.js

@@ -1,4 +1,4 @@
-{
+module.exports = {
   "plugins": [
     [
       "module-resolver",
@@ -9,7 +9,8 @@
           "~helpers": "./client/helpers"
         }
       }
-    ]
+    ],
+    ["@babel/plugin-transform-regenerator"]
   ],
   "presets": [
     [
@@ -22,4 +23,4 @@
     ],
     "@babel/preset-env"
   ]
-}
+};

client/App.vue

@@ -1,15 +1,38 @@
 <script>
 import { version } from '../package.json';
 import logo from './assets/logo.svg';
-import { NotificationBar } from '~components';
-import { NOTIFICATION_TIMEOUT, NOTIFICATION_TYPE_SUCCESS } from '~constants';
+import { FeatureFlag, NotificationBar } from '~components';
+import {
+  ENVIRONMENT_LIST,
+  NOTIFICATION_TIMEOUT,
+  NOTIFICATION_TYPE_SUCCESS,
+} from '~constants';
+import {
+  getEnvironment,
+  getEnvironmentList,
+  getEnvironmentLocation,
+} from '~helpers';
 
 export default {
   components: {
-    NotificationBar,
+    'feature-flag': FeatureFlag,
+    'notification-bar': NotificationBar,
   },
   data() {
+    const { origin } = window.location;
+    const environmentList = ENVIRONMENT_LIST;
+
     return {
+      environment: {
+        list: getEnvironmentList({
+          environmentList,
+          origin,
+        }),
+        value: getEnvironment({
+          environmentList,
+          origin,
+        }),
+      },
       logo,
       notification: {
         message: '',
@@ -40,6 +63,19 @@ export default {
         }
       }
     },
+    onEnvironmentSelectChange(environment) {
+      if (environment === this.environment.value) {
+        return;
+      }
+
+      const { pathname, search } = window.location;
+
+      window.location = getEnvironmentLocation({
+        environment,
+        pathname,
+        search,
+      });
+    },
     onNotification({ message, type = NOTIFICATION_TYPE_SUCCESS }) {
       this.notification.message = message;
       this.notification.type = type;
@@ -71,7 +107,7 @@ export default {
 
 <template>
   <main @click="globalClick">
-    <NotificationBar
+    <notification-bar
       :message="notification.message"
       :onClose="onNotificationClose"
       :show="notification.show"
@@ -82,28 +118,29 @@ export default {
         <div v-html="logo"></div>
         <span class="version">{{ version }}</span>
       </a>
+
+      <feature-flag name="environment-select">
+        <v-select
+          class="environment-select"
+          :on-change="onEnvironmentSelectChange"
+          :options="environment.list"
+          :searchable="false"
+          :value="environment.value"
+        />
+      </feature-flag>
+
       <div class="namespace" v-if="$route.params.namespace">
         <a
           class="workflows"
           :class="{
             'router-link-active':
-              $route.path === `/namespaces/${$route.params.namespace}/workflows`,
+              $route.path ===
+              `/namespaces/${$route.params.namespace}/workflows`,
           }"
           :href="`/namespaces/${$route.params.namespace}/workflows`"
         >
           {{ $route.params.namespace }}
         </a>
-        <a
-          class="config"
-          :class="{
-            'router-link-active':
-              $route.path === `/namespaces/${$route.params.namespace}/config`,
-          }"
-          :href="`/namespaces/${$route.params.namespace}/config`"
-        ></a>
-      </div>
-      <div v-if="$route.name === 'workflow-list'">
-        Workflows
       </div>
       <div class="detail-view workflow-id" v-if="$route.params.workflowId">
         <span>{{ $route.params.workflowId }}</span>
@@ -206,6 +243,21 @@ header.top-bar
     bottom: 0;
   }
 
+  .environment-select {
+    .dropdown-toggle {
+      border-color: transparent;
+    }
+
+    .open-indicator:before {
+      border-color: uber-blue;
+    }
+
+    .selected-tag {
+      color: white;
+      font-weight: bold;
+    }
+  }
+
 body, main
   height 100%
 main
@@ -238,7 +290,7 @@ area-loader, section.loading
     height size
     border-radius size
     left "calc(50% - %s)" % (size/2)
-    top "calc(25% - %s)" % (size/2)
+    top 300px;
     border 3px solid uber-blue
     border-bottom-color transparent
     animation spin 800ms linear infinite

client/components/button-fill.vue

@@ -0,0 +1,50 @@
+<template>
+  <component
+    class="button-fill"
+    :href="href"
+    :is="tag"
+    :to="to"
+    @click="onClick"
+  >
+    {{ label }}
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'button-fill',
+  props: {
+    href: {
+      type: String,
+    },
+    label: {
+      type: String,
+    },
+    tag: {
+      type: String,
+      default: 'button',
+    },
+    to: {
+      type: Object,
+    },
+  },
+  methods: {
+    onClick(...args) {
+      this.$emit('click', ...args);
+    },
+  },
+};
+</script>
+
+<style lang="stylus">
+.button-fill {
+  cursor: pointer;
+  display: inline-block;
+  padding: 13px 21px;
+  transition: all 400ms ease;
+  font-weight: 600;
+  color: #fff !important;
+  background-color: #11939a;
+  white-space: nowrap;
+}
+</style>

client/components/error-message.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="error-message-container" v-if="error">
+    <span class="error">
+      {{ error }}
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'error-message',
+  props: ['error'],
+};
+</script>
+
+<style lang="stylus">
+.error-message-container {
+  padding: 70px 0;
+}
+</style>

client/components/feature-flag/helpers.js

@@ -0,0 +1,10 @@
+export const isFlagEnabled = ({ flagHash = {}, name = '' }) =>
+  flagHash[name] || false;
+
+export const mapFlagsToHash = (flagArray = []) => {
+  return flagArray.reduce((accumulator, { key = '', value = false }) => {
+    accumulator[key] = value;
+
+    return accumulator;
+  }, {});
+};

client/components/feature-flag/helpers.spec.js

@@ -0,0 +1,38 @@
+import { isFlagEnabled, mapFlagsToHash } from './helpers';
+
+describe('feature-flag helpers', () => {
+  describe('isFlagEnabled', () => {
+    it('should return false when passed name = "workflow-terminate" and flagHash = {}.', () => {
+      const name = 'workflow-terminate';
+      const flagHash = {};
+      const output = isFlagEnabled({ flagHash, name });
+
+      expect(output).toEqual(false);
+    });
+
+    it('should return true when passed name = "workflow-terminate" and flagHash = { "workflow-terminate": true }.', () => {
+      const name = 'workflow-terminate';
+      const flagHash = { 'workflow-terminate': true };
+      const output = isFlagEnabled({ flagHash, name });
+
+      expect(output).toEqual(true);
+    });
+
+    it('should return false when passed name = "workflow-terminate" and flagHash = { "workflow-terminate": false }.', () => {
+      const name = 'workflow-terminate';
+      const flagHash = { 'workflow-terminate': false };
+      const output = isFlagEnabled({ flagHash, name });
+
+      expect(output).toEqual(false);
+    });
+  });
+
+  describe('mapFlagsToHash', () => {
+    it('should return { "workflow-terminate": true } when passed flagArray = [{ key: "workflow-terminate", value: true }].', () => {
+      const flagArray = [{ key: 'workflow-terminate', value: true }];
+      const output = mapFlagsToHash(flagArray);
+
+      expect(output).toEqual({ 'workflow-terminate': true });
+    });
+  });
+});

client/components/feature-flag/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="feature-flag" v-if="isFlagEnabled">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import featureFlags from '../../feature-flags.json';
+import { isFlagEnabled, mapFlagsToHash } from './helpers';
+
+export default {
+  name: 'feature-flag',
+  props: ['name'],
+  computed: {
+    flagHash() {
+      return mapFlagsToHash(featureFlags);
+    },
+    isFlagEnabled() {
+      const { flagHash, name } = this;
+
+      return isFlagEnabled({ flagHash, name });
+    },
+  },
+};
+</script>

client/components/flex-grid-item.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="flex-grid-item" :style="{ maxWidth: width }">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'flex-grid-item',
+  props: ['width'],
+};
+</script>
+
+<style lang="stylus">
+.flex-grid-item {
+  flex-grow: 1;
+  margin-right: 5px;
+  &:last-child {
+    margin-right: 0;
+  }
+}
+</style>

client/components/flex-grid.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="flex-grid">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="stylus">
+.flex-grid {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+</style>

client/components/index.js

@@ -1,9 +1,18 @@
 export { default as BarLoader } from './bar-loader';
+export { default as ButtonFill } from './button-fill';
 export { default as Copy } from './copy';
 export { default as DataViewer } from './data-viewer';
 export { default as DetailList } from './detail-list';
 export { default as DateRangePicker } from './date-range-picker';
 export { default as NamespaceNavigation } from './namespace-navigation';
+export { default as ErrorMessage } from './error-message';
+export { default as FeatureFlag } from './feature-flag';
+export { default as FlexGrid } from './flex-grid';
+export { default as FlexGridItem } from './flex-grid-item';
+export { default as LoadingMessage } from './loading-message';
+export { default as LoadingSpinner } from './loading-spinner';
 export { default as NavigationBar } from './navigation-bar';
 export { default as NavigationLink } from './navigation-link';
+export { default as NoResults } from './no-results';
 export { default as NotificationBar } from './notification-bar';
+export { default as TextInput } from './text-input';