Tasks table visual changes
</v-card-actions>
</v-card>
</v-dialog>
+ <div class="table-container">
<v-data-table
v-model="selected"
:headers="headers"
item-key="id"
class="elevation-1"
:key="tableKey"
+ :rows-per-page-items="rowsPerPageItems"
>
<template v-slot:headers="props">
<tr>
@click="changeSort(header.value)"
>
<v-icon small>arrow_upward</v-icon>
- {{ header.text }}
+ <span class="dark-font">{{ header.text }}</span>
</th>
</tr>
</template>
</tr>
</template>
</v-data-table>
+ </div>
<div class="text-xs-center pt-2">
<v-btn color="primary" @click="showModalCreate=true">Create tasks</v-btn>
<v-tooltip top>
@@ -332,13 +335,13 @@ export default {
selected: [],
headers: [
{ text: 'ID', value: 'id' },
- { text: 'Hostname', value: 'hostname' },
- { text: 'Command', value: 'command' },
- { text: 'Pid', value: 'pid' },
- { text: 'Status', value: 'status' },
- { text: 'Spawn at', value: 'spawnAt' },
- { text: 'Terminate at', value: 'terminateAt' },
- { text: 'Actions', value: 'id', sortable: false }
+ { text: 'hostname', value: 'hostname' },
+ { text: 'command', value: 'command' },
+ { text: 'pid', value: 'pid' },
+ { text: 'status', value: 'status' },
+ { text: 'spawn at', value: 'spawnAt' },
+ { text: 'terminate at', value: 'terminateAt' },
+ { text: 'actions', value: 'id', sortable: false }
],
tasks: [],
hostnames: [],
@@ -367,7 +370,8 @@ export default {
logs: [],
path: '',
actionType: '',
- gracefully: null
+ gracefully: null,
+ rowsPerPageItems: [{'text': '$vuetify.dataIterator.rowsPerPageAll', 'value': -1}, 25, 10, 5]
}
},
@@ -674,6 +678,14 @@ export default {
}
</script>
<style>
+.dark-font {
+ color: black !important;
+ font-size: 1.5em;
+}
+.table-container {
+ max-height: 80vh;
+ overflow-y: scroll;
+}
.float-right-button {
float: right;
}
