Feature/cluster name route update (#414)

* added cluster name to routes to enable switching cluster in future PR

* fixing failing test

Author: just-at-uber

client/components/workflow-grid.vue

@@ -83,6 +83,7 @@ export default {
             :to="{
               name: 'workflow/summary',
               params: {
+                clusterName: item.clusterName,
                 domain: item.domainName,
                 runId: item.runId,
                 workflowId: item.workflowId,

client/containers/workflow-list/component.vue

@@ -55,7 +55,9 @@ import { delay, getEndTimeIsoString, getStartTimeIsoString } from '~helpers';
 import { httpService } from '~services';
 
 export default {
+  name: 'workflow-list',
   props: [
+    'clusterName',
     'dateFormat',
     'domain',
     'fetchWorkflowListUrl',
@@ -145,9 +147,15 @@ export default {
       return getEndTimeIsoString(range, endTime);
     },
     formattedResults() {
-      const { dateFormat, results, timeFormat, timezone } = this;
-
-      return getFormattedResults({ dateFormat, results, timeFormat, timezone });
+      const { clusterName, dateFormat, results, timeFormat, timezone } = this;
+
+      return getFormattedResults({
+        clusterName,
+        dateFormat,
+        results,
+        timeFormat,
+        timezone,
+      });
     },
     minStartDate() {
       return this.getMinStartDate();
@@ -191,6 +199,11 @@ export default {
 
       return getStartTimeIsoString(range, startTime);
     },
+    crossRegionProps() {
+      const { clusterName, domain } = this;
+
+      return { clusterName, domain };
+    },
   },
   methods: {
     clearState() {
@@ -226,7 +239,10 @@ export default {
         this.abortController = new AbortController();
         const { signal } = this.abortController;
 
-        const request = await httpService.get(url, { query, signal });
+        const request = await httpService.get(url, {
+          query,
+          signal,
+        });
 
         this.abortController = undefined;
 
@@ -248,14 +264,18 @@ export default {
 
       return { status: 'success', workflows, nextPageToken };
     },
-    fetchDomain() {
+    async fetchDomain() {
       const { domain, now } = this;
 
       this.loading = true;
 
-      return httpService.get(`/api/domains/${domain}`).then(r => {
+      try {
+        const domainInfo = await httpService.get(`/api/domains/${domain}`);
+
         this.maxRetentionDays =
-          Number(r.configuration.workflowExecutionRetentionPeriodInDays) || 30;
+          Number(
+            domainInfo.configuration.workflowExecutionRetentionPeriodInDays
+          ) || 30;
         this.loading = false;
 
         const minStartDate = this.getMinStartDate();
@@ -274,7 +294,12 @@ export default {
             this.setRange(`last-${Math.min(30, this.maxRetentionDays)}-days`);
           }
         }
-      });
+      } catch (error) {
+        this.error =
+          (error.json && error.json.message) || error.status || error.message;
+      } finally {
+        this.loading = false;
+      }
     },
     async fetchWorkflowList() {
       if (!this.criteria || this.loading) {
@@ -451,11 +476,9 @@ export default {
         this.refreshWorkflows();
       }
     },
-    async domain(newDomain, oldDomain) {
-      if (newDomain && oldDomain && newDomain !== oldDomain) {
-        await this.fetchDomain();
-        this.refreshWorkflows();
-      }
+    async crossRegionProps() {
+      await this.fetchDomain();
+      this.refreshWorkflows();
     },
   },
 };

client/containers/workflow-list/helpers/get-formatted-results.js

@@ -22,11 +22,18 @@
 import { STATUS_OPEN } from '../constants';
 import { getDatetimeFormattedString } from '~helpers';
 
-const getFormattedResults = ({ dateFormat, results, timeFormat, timezone }) =>
+const getFormattedResults = ({
+  clusterName,
+  dateFormat,
+  results,
+  timeFormat,
+  timezone,
+}) =>
   results.map(result => {
     const status = (result.closeStatus || STATUS_OPEN).toLowerCase();
 
     return {
+      clusterName,
       domainName: result.domainName,
       endTime: result.closeTime
         ? getDatetimeFormattedString({

client/main.js

@@ -100,52 +100,53 @@ const routeOpts = {
     },
     {
       name: 'domain',
-      path: '/domains/:domain',
-      redirect: '/domains/:domain/workflows',
+      path: '/domains/:domain/:clusterName?',
+      redirect: '/domains/:domain/:clusterName?/workflows',
       component: Domain,
       props: ({ params }) => ({
+        clusterName: params.clusterName,
         domain: params.domain,
       }),
       children: [
         {
           name: 'workflow-list',
-          path: '/domains/:domain/workflows',
+          path: '/domains/:domain/:clusterName?/workflows',
           components: {
             'workflow-list': WorkflowList,
           },
         },
         {
           name: 'domain-metrics',
-          path: '/domains/:domain/metrics',
+          path: '/domains/:domain/:clusterName?/metrics',
           components: {
             'domain-metrics': DomainMetrics,
           },
         },
         {
           name: 'domain-settings',
-          path: '/domains/:domain/settings',
+          path: '/domains/:domain/:clusterName?/settings',
           components: {
             'domain-settings': DomainSettings,
           },
         },
         {
           name: 'workflow-archival',
-          path: '/domains/:domain/archival',
-          redirect: '/domains/:domain/archival/basic',
+          path: '/domains/:domain/:clusterName?/archival',
+          redirect: '/domains/:domain/:clusterName?/archival/basic',
           components: {
             'workflow-archival': WorkflowArchival,
           },
           children: [
             {
               name: 'workflow-archival-advanced',
-              path: '/domains/:domain/archival/advanced',
+              path: '/domains/:domain/:clusterName?/archival/advanced',
               components: {
                 'workflow-archival-advanced': WorkflowArchivalAdvanced,
               },
             },
             {
               name: 'workflow-archival-basic',
-              path: '/domains/:domain/archival/basic',
+              path: '/domains/:domain/:clusterName?/archival/basic',
               components: {
                 'workflow-archival-basic': WorkflowArchivalBasic,
               },
@@ -156,9 +157,10 @@ const routeOpts = {
     },
     {
       name: 'workflow',
-      path: '/domains/:domain/workflows/:workflowId/:runId',
+      path: '/domains/:domain/:clusterName?/workflows/:workflowId/:runId',
       component: Workflow,
       props: ({ params }) => ({
+        clusterName: params.clusterName,
         displayWorkflowId: params.workflowId,
         domain: params.domain,
         runId: params.runId,
@@ -167,7 +169,8 @@ const routeOpts = {
       children: [
         {
           name: 'workflow/summary',
-          path: '/domains/:domain/workflows/:workflowId/:runId/summary',
+          path:
+            '/domains/:domain/:clusterName?/workflows/:workflowId/:runId/summary',
           components: {
             summary: WorkflowSummary,
           },
@@ -180,12 +183,14 @@ const routeOpts = {
         },
         {
           name: 'workflow/history',
-          path: '/domains/:domain/workflows/:workflowId/:runId/history',
+          path:
+            '/domains/:domain/:clusterName?/workflows/:workflowId/:runId/history',
           components: {
             history: WorkflowHistory,
           },
           props: {
             history: ({ params, query }) => ({
+              clusterName: params.clusterName,
               domain: params.domain,
               eventId: Number(query.eventId) || undefined,
               format: query.format || 'grid',
@@ -198,21 +203,24 @@ const routeOpts = {
         },
         {
           name: 'workflow/pending',
-          path: '/domains/:domain/workflows/:workflowId/:runId/pending',
+          path:
+            '/domains/:domain/:clusterName?/workflows/:workflowId/:runId/pending',
           components: {
             pending: WorkflowPending,
           },
         },
         {
           name: 'workflow/stack-trace',
-          path: '/domains/:domain/workflows/:workflowId/:runId/stack-trace',
+          path:
+            '/domains/:domain/:clusterName?/workflows/:workflowId/:runId/stack-trace',
           components: {
             stacktrace: StackTrace,
           },
         },
         {
           name: 'workflow/query',
-          path: '/domains/:domain/workflows/:workflowId/:runId/query',
+          path:
+            '/domains/:domain/:clusterName?/workflows/:workflowId/:runId/query',
           components: {
             query: Query,
           },
@@ -221,31 +229,32 @@ const routeOpts = {
     },
     {
       name: 'task-list',
-      path: '/domains/:domain/task-lists/:taskList',
-      redirect: '/domains/:domain/task-lists/:taskList/pollers',
+      path: '/domains/:domain/:clusterName?/task-lists/:taskList',
+      redirect: '/domains/:domain/:clusterName?/task-lists/:taskList/pollers',
       component: TaskList,
       props: ({ params }) => ({
+        clusterName: params.clusterName,
         domain: params.domain,
         taskList: params.taskList,
       }),
       children: [
         {
           name: 'task-list/pollers',
-          path: '/domains/:domain/task-lists/:taskList/pollers',
+          path: '/domains/:domain/:clusterName?/task-lists/:taskList/pollers',
           components: {
             pollers: TaskListPollers,
           },
         },
         {
           name: 'task-list/partition',
-          path: '/domains/:domain/task-lists/:taskList/partition',
+          path: '/domains/:domain/:clusterName?/task-lists/:taskList/partition',
           components: {
             partition: TaskListPartition,
           },
         },
         {
           name: 'task-list/metrics',
-          path: '/domains/:domain/task-lists/:taskList/metrics',
+          path: '/domains/:domain/:clusterName?/task-lists/:taskList/metrics',
           components: {
             partition: TaskListMetrics,
           },
@@ -262,11 +271,11 @@ const routeOpts = {
     },
     {
       name: 'domain-config-redirect',
-      path: '/domains/:domain/config',
-      redirect: '/domains/:domain/settings',
+      path: '/domains/:domain/:clusterName?/config',
+      redirect: '/domains/:domain/:clusterName?/settings',
     },
     {
-      path: '/domains/:domain/history',
+      path: '/domains/:domain/:clusterName?/history',
       redirect: ({ params, query }) => {
         if (!query.runId || !query.workflowId) {
           return {
@@ -278,6 +287,7 @@ const routeOpts = {
         const { runId, workflowId, ...queryWhitelist } = query;
 
         const newParams = {
+          clusterName: params.clusterName,
           runId,
           workflowId,
           domain: params.domain,

client/routes/domain/index.vue

@@ -23,7 +23,7 @@
 import { FeatureFlag, NavigationBar, NavigationLink } from '~components';
 
 export default {
-  props: ['dateFormat', 'domain', 'timeFormat', 'timezone'],
+  props: ['clusterName', 'dateFormat', 'domain', 'timeFormat', 'timezone'],
   components: {
     'feature-flag': FeatureFlag,
     'navigation-bar': NavigationBar,
@@ -38,37 +38,47 @@ export default {
       <navigation-link
         icon="icon_search"
         label="Workflows"
-        :to="{ name: 'workflow-list' }"
+        :to="{ name: 'workflow-list', params: { clusterName } }"
       />
       <navigation-link
         label="Settings"
         icon="icon_settings"
-        :to="{ name: 'domain-settings' }"
+        :to="{ name: 'domain-settings', params: { clusterName } }"
       />
       <feature-flag display="inline" name="domainMetrics">
         <navigation-link
           label="Metrics"
           icon="icon_chart"
-          :to="{ name: 'domain-metrics' }"
+          :to="{ name: 'domain-metrics', params: { clusterName } }"
         />
       </feature-flag>
       <navigation-link
         label="Archival"
         icon="icon_trip-history"
-        :to="{ name: 'workflow-archival' }"
+        :to="{ name: 'workflow-archival', params: { clusterName } }"
       />
     </navigation-bar>
     <router-view
       name="workflow-list"
+      :cluster-name="clusterName"
       :date-format="dateFormat"
       :domain="domain"
       :time-format="timeFormat"
       :timezone="timezone"
     />
-    <router-view name="domain-settings" :domain="domain" />
-    <router-view name="domain-metrics" :domain="domain" />
+    <router-view
+      name="domain-settings"
+      :cluster-name="clusterName"
+      :domain="domain"
+    />
+    <router-view
+      name="domain-metrics"
+      :cluster-name="clusterName"
+      :domain="domain"
+    />
     <router-view
       name="workflow-archival"
+      :cluster-name="clusterName"
       :date-format="dateFormat"
       :domain="domain"
       :time-format="timeFormat"

client/test/domain-settings.test.js

@@ -23,7 +23,7 @@ describe('Domain Settings', () => {
   async function domainConfigTest(mochaTest, desc) {
     const [testEl, scenario] = new Scenario(mochaTest)
       .withDomain('ci-test')
-      .startingAt('/domains/ci-test/config')
+      .startingAt('/domains/ci-test/settings')
       .withFeatureFlags()
       .withEmptyNewsFeed()
       .withDomainDescription('ci-test', desc)