step: show command, shell and exit status on run steps

src/components/log.vue

@@ -1,6 +1,5 @@
 <template>
-  <div class="dark">
+  <div class="overflow-x-auto">
-    <div class="p-3 rounded bg-gray-900 text-white overflow-x-auto">
     <div v-for="(item, index) in items" :key="index">
       <div class="font-mono leading-normal text-xs whitespace-no-wrap" v-html="item" />
     </div>
@@ -8,7 +7,6 @@
       <div v-html="lastitem" />
     </div>
   </div>
-  </div>
 </template>
 
 <script>

src/components/step.vue

@@ -16,7 +16,47 @@
         </div>
         <span class>{{ duration }}</span>
       </div>
-      <div class="p-1" v-show="active">
+      <div class="p-1 font-mono text-xs" v-show="active">
+        <div v-if="step.type == 'run'">
+          <div class="p-3 rounded-t bg-gray-900 text-white">
+            <span>
+              <span class="w-2/12 bg-gray-700 rounded-l px-3 py-1 text-center font-semibold">Shell</span>
+              <span
+                class="w-2/12 bg-gray-600 rounded-r px-3 py-1 text-center font-semibold mr-2"
+              >{{ step.shell}}</span>
+            </span>
+            <span v-if="step.exit_status != undefined">
+              <span
+                class="w-2/12 bg-gray-700 rounded-l px-3 py-1 text-center font-semibold"
+              >Exit Status</span>
+              <span
+                class="w-2/12 bg-gray-600 rounded-r px-3 py-1 text-center font-semibold mr-2"
+              >{{ step.exit_status}}</span>
+            </span>
+          </div>
+          <div
+            class="px-3 py-2 border-b-2 border-gray-900 bg-gray-700 text-white cursor-pointer"
+            @click.prevent="toggleCommand"
+          >
+            <i
+              class="inline-block mr-1 mdi mdi-arrow-right"
+              :class="{ 'arrow-down': commandActive, 'arrow-right': !commandActive }"
+            ></i>
+            <span>Command</span>
+          </div>
+          <div
+            v-show="commandActive"
+            class="p-3 bg-gray-900 text-white overflow-x-auto"
+            :class="{ 'rounded': step.type != 'run' }"
+          >
+            <pre class="font-mono text-xs">{{ step.command}}</pre>
+          </div>
+        </div>
+        <div v-if="step.type == 'run'" class="px-3 py-2 bg-gray-700 text-white">Log</div>
+        <div
+          class="p-3 rounded-b bg-gray-900 text-white"
+          :class="{ 'rounded': step.type != 'run' }"
+        >
           <Log
             v-bind:runid="runid"
             v-bind:taskid="taskid"
@@ -28,6 +68,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -45,6 +86,7 @@ export default {
   data() {
     return {
       active: false,
+      commandActive: true,
       now: moment()
     };
   },
@@ -80,15 +122,12 @@ export default {
   methods: {
     toggle() {
       this.active = !this.active;
-      if (this.active) {
+    },
-        this.$emit("step-open", this.index);
+    toggleCommand() {
-      }
+      this.commandActive = !this.commandActive;
     }
   },
   created() {
-    if (this.active) {
-      this.$emit("step-open", this.index);
-    }
     window.setInterval(() => {
       this.now = moment();
     }, 500);