Add loading server configs

ui/src/views/servers/ServerConfigsView.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import TableComponent from '@/components/TableComponent.vue';
+import {getConfigs} from '@/services/ServerConfigs'
 
-const tableHeader = ["ID", "Server ID", "System Message", "Rate limit"]
+const serverConfigs = await getConfigs()
-const tableRows = [["1", "name", "comment", "1"]]
+const tableHeader = ["ID", "Server ID", "System Message", "Rate limit", "Created"]
+const tableRows = serverConfigs.map(config => [config.id, config.serverId, config.systemMessage.slice(0, 47) + "...", config.rateLimit, config.time])
 const actions = [{ class: "btn btn-sm btn-info m-1", content: "Edit", event: (_: number) => { } }, { class: "btn btn-sm btn-error m-1", content: "Delete", event: (_: number) => { } }]
 </script>
 <template>
@@ -10,5 +12,6 @@ const actions = [{ class: "btn btn-sm btn-info m-1", content: "Edit", event: (_:
         <h1 class="text-xl normal-case">Server Configs</h1>
         <button class="btn btn-circle btn-success">Add</button>
     </div>
-    <TableComponent :tableHeader="tableHeader" :tableRows="tableRows" :actions="actions" />
+    <TableComponent v-if="serverConfigs.length" :tableHeader="tableHeader" :tableRows="tableRows" :actions="actions" />
+    <p v-else class="m-5">No server configs</p>
 </template>