Use Tree component in GScan

cylc · Nov 23, 2020 · c9c57ab · c9c57ab
1 parent 74690d3
commit c9c57ab
Showing 1 changed file with 65 additions and 58 deletions.
diff --git a/src/components/cylc/gscan/GScan.vue b/src/components/cylc/gscan/GScan.vue
@@ -23,61 +23,62 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       v-if="workflows && workflows.length > 0"
       class="c-gscan-workflows"
     >
-      <div
-        v-for="workflow in sortedWorkflows"
-        :key="workflow.id"
-        class="c-gscan-workflow"
+      <tree
+        :filterable="false"
+        :workflows="sortedWorkflows"
       >
-        <v-list-item
-          :to="`/workflows/${ workflow.name }`"
-          :class="getWorkflowClass(workflow.status)"
-        >
-          <v-list-item-action>
-            <v-icon>{{ getWorkflowIcon(workflow.status) }}</v-icon>
-          </v-list-item-action>
-          <v-list-item-title>
-            <v-layout align-center align-content-center nowrap>
-              <v-flex class="c-gscan-workflow-name">{{ workflow.name }}</v-flex>
-              <v-flex shrink>
-                <!-- task summary tooltips -->
-                <span
-                  v-for="[state, tasks] in workflowsSummaries.get(workflow.name).entries()"
-                  :key="`${workflow.name}-summary-${state}`"
-                >
-                  <v-tooltip color="black" top>
-                    <template v-slot:activator="{ on }">
-                      <!-- a v-tooltip does not work directly set on Cylc job component, so we use a dummy button to wrap it -->
-                      <!-- NB: most of the classes/directives in these button are applied so that the user does not notice it is a button -->
-                      <v-btn
-                        v-on="on"
-                        class="mt-1 pa-0"
-                        min-width="0"
-                        min-height="0"
-                        style="font-size: 120%"
-                        :ripple="false"
-                        small
-                        dark
-                        text
-                      >
-                        <job :status="state" />
-                      </v-btn>
-                    </template>
-                    <!-- tooltip text -->
-                    <span>
-                      <span class="grey--text">Recent {{ state }} tasks:</span>
-                      <br/>
-                      <span v-for="(task, index) in tasks.slice(0, maximumTasksDisplayed)" :key="index">
-                        {{ task }}<br v-if="index !== tasks.length -1" />
+        <template v-slot:node="scope">
+          <v-list-item
+            :to="workflowLink(scope.node)"
+            :class="getWorkflowClass(scope.node.node)"
+          >
+            <v-list-item-action v-if="scope.node.type === 'workflow'">
+              <v-icon>{{ getWorkflowIcon(scope.node.node.status) }}</v-icon>
+            </v-list-item-action>
+            <v-list-item-title>
+              <v-layout align-center align-content-center wrap>
+                <v-flex grow>{{ scope.node.text }}</v-flex>
+                <v-flex shrink ml-4 v-if="scope.node.type === 'workflow'">
+                  <!-- task summary tooltips -->
+                  <span
+                    v-for="[state, tasks] in workflowsSummaries.get(scope.node.id).entries()"
+                    :key="`${scope.node.id}-summary-${state}`"
+                  >
+                    <v-tooltip color="black" top>
+                      <template v-slot:activator="{ on }">
+                        <!-- a v-tooltip does not work directly set on Cylc job component, so we use a dummy button to wrap it -->
+                        <!-- NB: most of the classes/directives in these button are applied so that the user does not notice it is a button -->
+                        <v-btn
+                          v-on="on"
+                          class="mt-1 pa-0"
+                          min-width="0"
+                          min-height="0"
+                          style="font-size: 120%"
+                          :ripple="false"
+                          small
+                          dark
+                          text
+                        >
+                          <job :status="state" />
+                        </v-btn>
+                      </template>
+                      <!-- tooltip text -->
+                      <span>
+                        <span class="grey--text">Recent {{ state }} tasks:</span>
+                        <br/>
+                        <span v-for="(task, index) in tasks.slice(0, maximumTasksDisplayed)" :key="index">
+                          {{ task }}<br v-if="index !== tasks.length -1" />
+                        </span>
+                        <span v-if="tasks.length > maximumTasksDisplayed" class="font-italic">And {{ tasks.length - maximumTasksDisplayed }} more</span>
                       </span>
-                      <span v-if="tasks.length > maximumTasksDisplayed" class="font-italic">And {{ tasks.length - maximumTasksDisplayed }} more</span>
-                    </span>
-                  </v-tooltip>
-                </span>
-              </v-flex>
-            </v-layout>
-          </v-list-item-title>
-        </v-list-item>
-      </div>
+                    </v-tooltip>
+                  </span>
+                </v-flex>
+              </v-layout>
+            </v-list-item-title>
+          </v-list-item>
+        </template>
+      </tree>
     </div>
     <!-- when no workflows are returned in the GraphQL query -->
     <div v-else>
@@ -89,11 +90,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import Job from '@/components/cylc/Job'
 import { getWorkflowSummary } from '@/components/cylc/gscan/index'
 import { GSCAN_QUERY } from '@/graphql/queries'
 import { mdiPlayCircle, mdiPauseOctagon, mdiHelpCircle } from '@mdi/js'
 import WorkflowState from '@/model/WorkflowState.model'
+import Tree from '@/components/cylc/tree/Tree'
 
 const QUERIES = {
   root: GSCAN_QUERY
@@ -102,7 +103,7 @@ const QUERIES = {
 export default {
   name: 'GScan',
   components: {
-    job: Job
+    Tree
   },
   props: {
     /**
@@ -224,11 +225,17 @@ export default {
       }
     },
 
-    getWorkflowClass (status) {
+    getWorkflowClass (node) {
       return {
-        // TODO: replace by constant or enum later (not TaskState as that doesn't have stopped, maybe WorkflowState?)
-        'c-workflow-stopped': status === WorkflowState.STOPPED.name.toLowerCase()
+        'c-workflow-stopped': node && node.status && node.status === WorkflowState.STOPPED.name.toLowerCase()
       }
+    },
+
+    workflowLink (node) {
+      if (node.type === 'workflow') {
+        return `/workflows/${ node.node.name }`
+      }
+      return ''
     }
   }
 }