Adjust admin automation sessions UI/UX

client/web/admin/src/themes/corteza-base/custom.scss

@@ -59,7 +59,12 @@ th {
 
 // custom height for resource lists with buttons
 .custom-resource-list-height {
-  height: calc(100vh - 115px);
+  height: calc(100vh - 120px);
+}
+
+// custom height for resource lists without buttons
+.custom-resource-list-height-no-buttons {
+  height: calc(100vh - 105px);
 }
 
 // to remove the gap on top of the sticky header table

client/web/admin/src/views/Automation/Scripts/Index.vue

@@ -1,5 +1,6 @@
 <template>
   <b-container
+    fluid="xl"
     class="d-flex flex-column h-100 py-3"
   >
     <c-content-header

client/web/admin/src/views/Automation/Session/List.vue

@@ -1,6 +1,7 @@
 <template>
   <b-container
     fluid="xl"
+    class="d-flex flex-column h-100 py-3"
   >
     <c-content-header
       :title="$t('title')"
@@ -25,17 +26,45 @@
       }"
       sticky-header
       hide-search
-      class="custom-resource-height"
+      hide-total
+      class="custom-resource-list-height-no-buttons"
     >
       <template #header>
-        <c-resource-list-status-filter
-          v-model="filter.completed"
-          :label="$t('filterForm.inProgress.label')"
-          :excluded-label="$t('filterForm.excluded.label')"
-          :inclusive-label="$t('filterForm.inclusive.label')"
-          :exclusive-label="$t('filterForm.exclusive.label')"
-          @change="filterList"
-        />
+        <b-row>
+          <b-col
+            cols="12"
+            sm="5"
+          >
+            <b-form-group
+              :label="$t('columns.sessionID')"
+              label-class="text-primary"
+              class="mb-2"
+            >
+              <c-input-search
+                :value="filter.sessionID"
+                size="sm"
+                @input="filterBySessionID"
+              />
+            </b-form-group>
+          </b-col>
+
+          <b-col
+            cols="12"
+            sm="5"
+          >
+            <b-form-group
+              :label="$t('columns.workflowID')"
+              label-class="text-primary"
+            >
+              <c-input-search
+                :value="filter.workflowID"
+                size="sm"
+                @input="filterByWorkflowID"
+              />
+            </b-form-group>
+          </b-col>
+        </b-row>
+
         <b-form-radio-group
           v-model="filter.status"
           :options="statusOptions"
@@ -49,6 +78,24 @@
         </span>
       </template>
 
+      <template #sessionID="{ item }">
+        <a
+          href="javascript:;"
+          @click="filterBySessionID(item.sessionID)"
+        >
+          {{ item.sessionID }}
+        </a>
+      </template>
+
+      <template #workflowID="{ item }">
+        <a
+          href="javascript:;"
+          @click="filterByWorkflowID(item.workflowID)"
+        >
+          {{ item.workflowID }}
+        </a>
+      </template>
+
       <template #actions="{ item }">
         <b-button
           size="sm"
@@ -67,11 +114,12 @@
 <script>
 import listHelpers from 'corteza-webapp-admin/src/mixins/listHelpers'
 import { components } from '@cortezaproject/corteza-vue'
-const { CResourceList } = components
+const { CResourceList, CInputSearch } = components
 
 export default {
   components: {
     CResourceList,
+    CInputSearch,
   },
 
   mixins: [
@@ -91,7 +139,10 @@ export default {
       editRoute: 'automation.session.edit',
 
       filter: {
-        status: undefined,
+        // Use null not undefined!
+        sessionID: null,
+        workflowID: null,
+        status: null,
         completed: 1,
       },
 
@@ -109,7 +160,6 @@ export default {
         },
         {
           key: 'status',
-          sortable: true,
         },
         {
           key: 'eventType',
@@ -135,7 +185,7 @@ export default {
   computed: {
     statusOptions () {
       return [
-        { value: undefined, text: this.$t('filterForm.all.label') },
+        { value: null, text: this.$t('filterForm.all.label') },
         { value: 0, text: this.$t('filterForm.started.label') },
         { value: 1, text: this.$t('filterForm.prompted.label') },
         { value: 2, text: this.$t('filterForm.suspended.label') },
@@ -153,6 +203,16 @@ export default {
     rowClass (item) {
       return { 'text-primary': item && !!item.completedAt }
     },
+
+    filterBySessionID (sessionID) {
+      this.filter.sessionID = sessionID || null
+      this.filterList()
+    },
+
+    filterByWorkflowID (workflowID) {
+      this.filter.workflowID = workflowID || null
+      this.filterList()
+    },
   },
 }
 </script>

client/web/admin/src/views/System/Actionlog/Index.vue

@@ -1,6 +1,7 @@
 <template>
   <b-container
-    class="py-3"
+    fluid="xl"
+    class="d-flex flex-column h-100 py-3"
   >
     <c-content-header
       :title="$t('title')"

lib/vue/src/components/input/CInputSearch.vue

@@ -1,5 +1,7 @@
 <template>
-  <b-input-group>
+  <b-input-group
+    :size="size"
+  >
     <b-input
       ref="searchInput"
       data-test-id="input-search"
@@ -10,7 +12,6 @@
       :disabled="disabled"
       :placeholder="placeholder"
       :autocomplete="autocomplete"
-      :size="size"
       class="h-100 pr-0 border-light border-right-0 text-truncate bg-white"
       @update="search"
       @keyup.enter="submitQuery"
@@ -23,6 +24,7 @@
         v-if="showSubmittable"
         variant="link"
         :disabled="disabled"
+        class="py-0"
         :class="{
           'search-icon-border': showSubmittableAndClearable,
           'cursor-default': !isSubmittable

lib/vue/src/components/resourceList/CResourceList.vue

@@ -122,7 +122,10 @@
       </b-table>
     </b-card-body>
 
-    <template #footer>
+    <template
+      v-if="showFooter"
+      #footer
+    >
       <div
         class="d-flex align-items-center justify-content-between"
       >
@@ -138,7 +141,7 @@
         </div>
 
         <b-button-group
-          v-if="showPagination"
+          v-if="!hidePagination"
         >
           <b-button
             :disabled="!hasPrevPage"
@@ -328,8 +331,8 @@ export default {
       return !!this.pagination.nextPage
     },
 
-    showPagination () {
-      return !this.hidePagination && (this.hasPrevPage || this.hasNextPage)
+    showFooter () {
+      return !(this.hideTotal && this.hidePagination)
     }
   },