Support list workflows with SQL like query (#55)

* Fix missing dependencies

* Add support to list workflow using SQL like query

* Address comments

Author: vancexu

client/routes/Workflows.vue

@@ -1,34 +1,48 @@
 <template>
   <section :class="{ workflows: true, loading }">
     <header class="filters">
-      <div class="field workflow-id">
-        <input type="search" class="workflow-id"
-          placeholder=" "
-          name="workflowId"
-          v-bind:value="$route.query.workflowId"
-          @input="setWorkflowFilter" />
-        <label for="workflowId">Workflow ID</label>
-      </div>
-      <div class="field workflow-name">
-        <input type="search" class="workflow-name"
-          placeholder=" "
-          name="workflowName"
-          v-bind:value="$route.query.workflowName"
-          @input="setWorkflowFilter" />
-        <label for="workflowName">Workflow Name</label>
-      </div>
-      <date-range-picker
-        :date-range="range"
-        :max-days="maxRetentionDays"
-        @change="setRange"
-      />
-      <v-select
-        class="status"
-        :value="status"
-        :options="statuses"
-        :on-change="setStatus"
-        :searchable="false"
-      />
+      <template v-if="filterMode === 'advanced'">
+        <div class="field query-string">
+          <input type="search" class="query-string"
+            placeholder=" "
+            key="sql-query"
+            name="queryString"
+            v-bind:value="$route.query.queryString"
+            @input="setWorkflowFilter" />
+          <label for="queryString">Query</label>
+        </div>
+      </template>
+      <template v-else>
+        <div class="field workflow-id">
+          <input type="search" class="workflow-id"
+            placeholder=" "
+            name="workflowId"
+            v-bind:value="$route.query.workflowId"
+            @input="setWorkflowFilter" />
+          <label for="workflowId">Workflow ID</label>
+        </div>
+        <div class="field workflow-name">
+          <input type="search" class="workflow-name"
+            placeholder=" "
+            name="workflowName"
+            v-bind:value="$route.query.workflowName"
+            @input="setWorkflowFilter" />
+          <label for="workflowName">Workflow Name</label>
+        </div>
+        <date-range-picker
+          :date-range="range"
+          :max-days="maxRetentionDays"
+          @change="setRange"
+        />
+        <v-select
+          class="status"
+          :value="status"
+          :options="statuses"
+          :on-change="setStatus"
+          :searchable="false"
+        />
+      </template>
+      <a class="toggle-filter" @click="toggleFilter">{{ filterMode === 'advanced' ? 'basic' : 'advanced' }}</a>
     </header>
     <section class="results"
       v-infinite-scroll="nextPage"
@@ -84,7 +98,8 @@ export default pagedGrid({
         { value: 'CONTINUED_AS_NEW', label: 'Continued As New' },
         { value: 'TIMED_OUT', label: 'Timed Out'}
       ],
-      maxRetentionDays: undefined
+      maxRetentionDays: undefined,
+      filterMode: 'basic'
     }
   },
   created() {
@@ -137,7 +152,8 @@ export default pagedGrid({
         endTime,
         status: q.status,
         workflowId: q.workflowId,
-        workflowName: q.workflowName
+        workflowName: q.workflowName,
+        queryString: q.queryString,
       }
     },
     queryOnChange() {
@@ -153,6 +169,10 @@ export default pagedGrid({
       delete q.domain
       q.nextPageToken = this.nextPageToken
 
+      if (q.queryString) {
+        return this.fetch(`/api/domain/${domain}/workflows/list`, q)
+      }
+
       return this.fetch(`/api/domain/${domain}/workflows/${state}`, q)
     }
   },
@@ -211,6 +231,14 @@ export default pagedGrid({
         }
         this.$router.replace({ query })
       }
+    },
+    toggleFilter() {
+      if (this.filterMode === 'advanced') {
+        this.filterMode = 'basic'
+        this.$route.query.queryString = ''
+      } else {
+        this.filterMode = 'advanced'
+      }
     }
   }
 })
@@ -228,6 +256,8 @@ section.workflows
       flex 1 1 auto
     .v-select
       flex 1 1 240px
+    a.toggle-filter
+      action-button()
 
   paged-grid()
 

package.json

@@ -61,6 +61,7 @@
     "vue-router": "^3.0.1",
     "vue-select": "nathanboktae/vue-select#after2.4",
     "vue-split-panel": "^1.0.4",
+    "vue-style-loader": "^3.1.2",
     "vue-template-compiler": "^2.5.2",
     "webpack": "^3.10.0"
   },
@@ -72,6 +73,7 @@
     "mocha": "^4.0.1",
     "mocha-chrome": "^1.1.0",
     "nathanboktae-browser-test-utils": "^0.1.0",
-    "supertest": "^3.0.0"
+    "supertest": "^3.0.0",
+    "webpack-hot-client": "^1.3.0"
   }
 }

server/middleware/tchannel-client.js

@@ -160,6 +160,7 @@ module.exports = async function(ctx, next) {
   ctx.cadence = {
     openWorkflows: req('ListOpenWorkflowExecutions', 'list', withDomainPaging),
     closedWorkflows: req('ListClosedWorkflowExecutions', 'list', withDomainPaging),
+    listWorkflows: req('ListWorkflowExecutions', 'list', withDomainPaging),
     getHistory: req('GetWorkflowExecutionHistory', 'get', withDomainAndWorkflowExecution),
     exportHistory: req('GetWorkflowExecutionHistory', 'get', withDomainAndWorkflowExecution, cliTransform),
     describeWorkflow: req('DescribeWorkflowExecution', 'describe', withWorkflowExecution),

server/routes.js

@@ -39,6 +39,14 @@ async function listWorkflows(state, ctx) {
 router.get('/api/domain/:domain/workflows/open', listWorkflows.bind(null, 'open'))
 router.get('/api/domain/:domain/workflows/closed', listWorkflows.bind(null, 'closed'))
 
+router.get('/api/domain/:domain/workflows/list', async function (ctx) {
+  var q = ctx.query || {}
+  ctx.body = await ctx.cadence['listWorkflows']({
+    query: q.queryString || undefined,
+    nextPageToken: q.nextPageToken ? Buffer.from(q.nextPageToken, 'base64') : undefined
+  })
+})
+
 router.get('/api/domain/:domain/workflows/:workflowId/:runId/history', async function (ctx) {
   var q = ctx.query || {}