info: add completion expression

cypress/component/info.cy.js

@@ -98,7 +98,15 @@ const TASK = {
         message: 'failed',
         satisfied: false,
       },
-    ]
+      {
+        label: 'x',
+        message: 'xxx',
+        satisfied: true,
+      }
+    ],
+    runtime: {
+      completion: '(succeeded and x) or failed'
+    }
   },
   children: [
     {
@@ -127,7 +135,7 @@ describe('Info component', () => {
         task: TASK,
         class: 'job_theme--default',
         // NOTE: expand all sections by default
-        panelExpansion: [0, 1, 2],
+        panelExpansion: [0, 1, 2, 3],
       }
     })
 
@@ -175,7 +183,7 @@ describe('Info component', () => {
     // the outputs panel
     cy.get('.outputs-panel.v-expansion-panel--active').should('be.visible')
       .find('.condition')
-      .should('have.length', 3)
+      .should('have.length', 4)
       .then((selector) => {
         expect(selector[0]).to.contain('started')
         expect(selector[0].classList.toString()).to.equal('condition satisfied')
@@ -185,6 +193,30 @@ describe('Info component', () => {
 
         expect(selector[2]).to.contain('failed')
         expect(selector[2].classList.toString()).to.equal('condition')
+
+        expect(selector[3]).to.contain('x')
+        expect(selector[3].classList.toString()).to.equal('condition satisfied')
+      })
+
+    // the completion panel
+    cy.get('.completion-panel.v-expansion-panel--active').should('be.visible')
+      .find('.condition')
+      .should('have.length', 5)
+      .then((selector) => {
+        expect(selector[0]).to.contain('(')
+        expect(selector[0].classList.toString()).to.equal('condition blank')
+
+        expect(selector[1]).to.contain('succeeded')
+        expect(selector[1].classList.toString()).to.equal('condition')
+
+        expect(selector[2]).to.contain('and x')
+        expect(selector[2].classList.toString()).to.equal('condition satisfied')
+
+        expect(selector[3]).to.contain(')')
+        expect(selector[3].classList.toString()).to.equal('condition blank')
+
+        expect(selector[4]).to.contain('or failed')
+        expect(selector[4].classList.toString()).to.equal('condition')
       })
   })
 

src/components/cylc/Info.vue

@@ -135,13 +135,40 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </v-expansion-panel-text>
       </v-expansion-panel>
 
+      <!-- The completion -->
+      <v-expansion-panel class="completion-panel">
+        <v-expansion-panel-title color="blue-grey-lighten-2">
+          Completion
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
+          <!-- TODO: We don't have an "is complete" field yet so we cannot
+            display an aggregate status-->
+          <ul>
+            <li
+              v-for="([complete, indent, line], index) in formatCompletion(completion, outputs)"
+              :key="index"
+            >
+              <span
+                class="condition"
+                :class="{satisfied: complete, blank: (complete === null)}"
+              >
+                <!-- Indent the line as required -->
+                <span :style="`margin-left: ${1 * indent}em;`"></span>
+                {{ line }}
+              </span>
+            </li>
+          </ul>
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+
     </v-expansion-panels>
   </div>
 </template>
 
 <script>
 import { useJobTheme } from '@/composables/localStorage'
 import GraphNode from '@/components/cylc/GraphNode.vue'
+import { formatCompletion } from '@/utils/outputs'
 
 export default {
   name: 'InfoComponent',
@@ -196,8 +223,17 @@ export default {
       return this.task?.node?.outputs || {}
     },
 
+    completion () {
+      // Task output completion expression stuff.
+      return this.task?.node?.runtime.completion
+    }
+
   },
 
+  methods: {
+    formatCompletion,
+  }
+
 }
 </script>
 
@@ -214,18 +250,22 @@ export default {
     .condition {
       opacity: 0.6;
     }
-    .condition.satisfied {
+    .condition.satisfied, .condition.blank {
       opacity: 1;
     }
 
     // prefixes a tick or cross before the entry
     .condition:before {
-      content: '\25CB';
-      padding-right: 0.5em;
+      display: inline-block;
+      content: '\25CB'; /* empty circle */
+      width: 1.5em;
       color: rgb(0, 0, 0);
     }
     .condition.satisfied:before {
-      content: '\25CF';
+      content: '\25CF'; /* filled circle */
+    }
+    .condition.blank:before {
+      content: ''; /* blank */
     }
 
     // for prerequsite task "aliases" (used in conditional expressions)

src/views/Info.vue

@@ -94,6 +94,10 @@ fragment TaskProxyData on TaskProxy {
     label
     satisfied
   }
+
+  runtime {
+    completion
+  }
 }
 
 fragment TaskDefinitionData on Task {