fix(fe): small ui fixes

semaphoreui · Nov 22, 2020 · 7d50947 · 7d50947
1 parent c3266bc
commit 7d50947
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 25 deletions.
diff --git a/web2/src/main.js b/web2/src/main.js
@@ -8,7 +8,7 @@ Vue.config.productionTip = false;
 
 Vue.filter('formatDate', (value) => (value ? moment(String(value)).fromNow() : '—'));
 Vue.filter('formatTime', (value) => (value ? moment(String(value)).format('LTS') : '—'));
-Vue.filter('formatMilliseconds', (value) => (value ? moment.duration(parseInt(value, 10), 'milliseconds').humanize() : undefined));
+Vue.filter('formatMilliseconds', (value) => (value ? moment.duration(parseInt(value, 10), 'milliseconds').humanize() : '—'));
 
 new Vue({
   router,

diff --git a/web2/src/views/project/Activity.vue b/web2/src/views/project/Activity.vue
@@ -16,8 +16,8 @@
     <v-data-table
       :headers="headers"
       :items="items"
-      hide-default-footer
       class="mt-4"
+      :footer-props="{ itemsPerPageOptions: [20] }"
     >
       <template v-slot:item.created="{ item }">
         {{ item.created | formatDate }}

diff --git a/web2/src/views/project/History.vue b/web2/src/views/project/History.vue
@@ -28,15 +28,11 @@
       </template>
 
       <template v-slot:item.start="{ item }">
-        <span v-if="item.start">{{ item.start | formatDate }}</span>
-        <v-chip v-else>Not started</v-chip>
+        {{ item.start | formatDate }}
       </template>
 
       <template v-slot:item.end="{ item }">
-        <span v-if="item.end">
-          {{ (new Date(item.end) - new Date(item.start)) | formatMilliseconds }}
-        </span>
-        <v-chip v-else>Not ended</v-chip>
+        {{ (new Date(item.end) - new Date(item.start)) | formatMilliseconds }}
       </template>
     </v-data-table>
   </div>

diff --git a/web2/src/views/project/TemplateView.vue b/web2/src/views/project/TemplateView.vue
@@ -97,12 +97,19 @@
                 <v-list-item-subtitle>{{ item.playbook }}</v-list-item-subtitle>
               </v-list-item-content>
             </v-list-item>
-
+          </v-list>
+        </v-col>
+        <v-col>
+          <v-list two-line subheader>
             <v-list-item>
+              <v-list-item-icon>
+                <v-icon>mdi-monitor</v-icon>
+              </v-list-item-icon>
+
               <v-list-item-content>
-                <v-list-item-title>SSH Key</v-list-item-title>
+                <v-list-item-title>Inventory</v-list-item-title>
                 <v-list-item-subtitle>
-                  {{ keys.find((x) => x.id === item.ssh_key_id).name }}
+                  {{ inventory.find((x) => x.id === item.inventory_id).name }}
                 </v-list-item-subtitle>
               </v-list-item-content>
             </v-list-item>
@@ -111,24 +118,39 @@
         <v-col>
           <v-list two-line subheader>
             <v-list-item>
+              <v-list-item-icon>
+                <v-icon>mdi-code-braces</v-icon>
+              </v-list-item-icon>
               <v-list-item-content>
-                <v-list-item-title>Inventory</v-list-item-title>
+                <v-list-item-title>Environment</v-list-item-title>
                 <v-list-item-subtitle>
-                  {{ inventory.find((x) => x.id === item.inventory_id).name }}
+                  {{ environment.find((x) => x.id === item.environment_id).name }}
                 </v-list-item-subtitle>
               </v-list-item-content>
             </v-list-item>
-
+          </v-list>
+        </v-col>
+        <v-col>
+          <v-list two-line subheader>
             <v-list-item>
+              <v-list-item-icon>
+                <v-icon>mdi-key</v-icon>
+              </v-list-item-icon>
               <v-list-item-content>
-                <v-list-item-title>Environment</v-list-item-title>
+                <v-list-item-title>SSH Key</v-list-item-title>
                 <v-list-item-subtitle>
-                  {{ environment.find((x) => x.id === item.environment_id).name }}
+                  {{ keys.find((x) => x.id === item.ssh_key_id).name }}
                 </v-list-item-subtitle>
               </v-list-item-content>
             </v-list-item>
-
+          </v-list>
+        </v-col>
+        <v-col>
+          <v-list two-line subheader>
             <v-list-item>
+              <v-list-item-icon>
+                <v-icon>mdi-git</v-icon>
+              </v-list-item-icon>
               <v-list-item-content>
                 <v-list-item-title>Repository</v-list-item-title>
                 <v-list-item-subtitle>
@@ -141,12 +163,12 @@
       </v-row>
     </v-container>
 
-    <h4 class="ml-4 mt-4">Task History</h4>
+<!--    <h4 class="ml-4 mt-1">Running History</h4>-->
     <v-data-table
       :headers="headers"
       :items="tasks"
-      hide-default-footer
-      class="mt-2"
+      :footer-props="{ itemsPerPageOptions: [20] }"
+      class="mt-0"
     >
       <template v-slot:item.id="{ item }">
         <a @click="showTaskLog(item.id)">#{{ item.id }}</a>
@@ -157,15 +179,11 @@
       </template>
 
       <template v-slot:item.start="{ item }">
-        <span v-if="item.start">{{ item.start | formatDate }}</span>
-        <v-chip v-else>Not started</v-chip>
+          {{ item.start | formatDate }}
       </template>
 
       <template v-slot:item.end="{ item }">
-        <span v-if="item.end">
           {{ (new Date(item.end) - new Date(item.start)) | formatMilliseconds }}
-        </span>
-        <v-chip v-else>Not ended</v-chip>
       </template>
     </v-data-table>
   </div>