Skip to content

Commit 0dc3c20

Browse files
teleclimberteleclimber
committed
feat(ds-host-frontend): show migrations in new app
- show migrations grid in new app in-process
1 parent 7e4bf83 commit 0dc3c20

2 files changed

Lines changed: 79 additions & 4 deletions

File tree

‎frontend-ds-host/src/components/appspace/MigrationsGrid.vue‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<script setup lang="ts">
2+
import { computed } from 'vue';
3+
4+
const props = defineProps<{
5+
migrations: {
6+
direction: "up" | "down";
7+
schema: number;
8+
}[]
9+
}>();
10+
11+
const grid = computed( () => {
12+
const m = props.migrations;
13+
const from_schema = m.reduce( (cur, m) => Math.min(cur, m.schema), 9999999 );
14+
const to_schema = m.reduce( (cur, m) => Math.max(cur, m.schema), 0 );
15+
const ret :{schema:number, up:boolean, down:boolean}[] = [];
16+
for( let i=from_schema; i<=to_schema; ++i ) {
17+
ret.push({
18+
schema: i,
19+
up: !!m.find( g=> g.schema === i && g.direction === "up"),
20+
down: !!m.find( g=> g.schema === i && g.direction === "down")
21+
});
22+
}
23+
return ret;
24+
});
25+
</script>
26+
27+
<template>
28+
<table v-if="grid.length" class="border border-gray-400">
29+
<thead>
30+
<tr class="text-gray-800">
31+
<th class="px-1 pl-2 font-medium">schema:</th>
32+
<th v-for="g in grid" class="font-medium">{{ g.schema }}</th>
33+
</tr>
34+
</thead>
35+
<tbody>
36+
<tr>
37+
<td class="uppercase text-sm text-gray-500 text-right px-1 pl-2">up:</td>
38+
<td v-for="g in grid" class="px-1">
39+
<svg v-if="g.up" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-big-up-filled text-green-600" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
40+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
41+
<path d="M10.586 3l-6.586 6.586a2 2 0 0 0 -.434 2.18l.068 .145a2 2 0 0 0 1.78 1.089h2.586v7a2 2 0 0 0 2 2h4l.15 -.005a2 2 0 0 0 1.85 -1.995l-.001 -7h2.587a2 2 0 0 0 1.414 -3.414l-6.586 -6.586a2 2 0 0 0 -2.828 0z" stroke-width="0" fill="currentColor"></path>
42+
</svg>
43+
<svg v-else xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x text-orange-500" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
44+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
45+
<path d="M18 6l-12 12"></path>
46+
<path d="M6 6l12 12"></path>
47+
</svg>
48+
</td>
49+
</tr>
50+
<tr>
51+
<td class="uppercase text-sm text-gray-500 text-right px-1 pl-2">down:</td>
52+
<td v-for="g in grid" class="px-1">
53+
<svg v-if="g.down" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-big-down-filled text-green-600" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
54+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
55+
<path d="M10 2l-.15 .005a2 2 0 0 0 -1.85 1.995v6.999l-2.586 .001a2 2 0 0 0 -1.414 3.414l6.586 6.586a2 2 0 0 0 2.828 0l6.586 -6.586a2 2 0 0 0 .434 -2.18l-.068 -.145a2 2 0 0 0 -1.78 -1.089l-2.586 -.001v-6.999a2 2 0 0 0 -2 -2h-4z" stroke-width="0" fill="currentColor"></path>
56+
</svg>
57+
<svg v-else xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x text-orange-500" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
58+
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
59+
<path d="M18 6l-12 12"></path>
60+
<path d="M6 6l12 12"></path>
61+
</svg>
62+
</td>
63+
</tr>
64+
</tbody>
65+
</table>
66+
<div v-else class="inline italic text-gray-500">
67+
No data migrations
68+
</div>
69+
</template>

‎frontend-ds-host/src/views/NewAppInProcess.vue‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import SmallMessage from '@/components/ui/SmallMessage.vue';
1616
1717
import { getLoadState } from '@/stores/loadable';
1818
import { LoadState, AppVersionUI } from '@/stores/types';
19+
import MigrationsGrid from '@/components/appspace/MigrationsGrid.vue';
1920
2021
const router = useRouter();
2122
@@ -218,6 +219,11 @@ const link_classes = ['text-blue-500', 'hover:underline', 'hover:text-blue-600'
218219
</SmallMessage>
219220
</DataDef>
220221

222+
<DataDef field="Migrations:">
223+
<MigrationsGrid :migrations="manifest.migrations"></MigrationsGrid>
224+
<SmallMessage v-if="warnings['migrations']" mood="warn" :class="small_msg_classes">{{ warnings['migrations'] }}</SmallMessage>
225+
</DataDef>
226+
221227
<DataDef field="License:">
222228
<p><AppLicense :license="manifest.license" ></AppLicense></p>
223229
<SmallMessage v-if="prev && sibling_versions.prev?.license !== manifest.license" mood="warn" :class="small_msg_classes">
@@ -251,24 +257,24 @@ const link_classes = ['text-blue-500', 'hover:underline', 'hover:text-blue-600'
251257
</li>
252258
</ul>
253259
<SmallMessage v-if="warnings['authors']" mood="warn" :class="small_msg_classes">{{ warnings['authors'] }}</SmallMessage>
254-
<p v-if="!manifest.authors || manifest.authors.length === 0" class="text-gray-400 italic">No authors listed</p>
260+
<p v-if="!manifest.authors || manifest.authors.length === 0" class="text-gray-500 italic">No authors listed</p>
255261
</DataDef>
256262

257263
<DataDef field="Website:">
258264
<a v-if="manifest.website" :href="manifest.website" :class="link_classes">{{ manifest.website }}</a>
259-
<p v-else class="text-gray-400 italic">No website listed</p>
265+
<p v-else class="text-gray-500 italic">No website listed</p>
260266
<SmallMessage v-if="warnings['website']" mood="warn" :class="small_msg_classes">{{ warnings['website'] }}</SmallMessage>
261267
</DataDef>
262268

263269
<DataDef field="Code repository:">
264270
<a v-if="manifest.code" :href="manifest.code" :class="link_classes">{{ manifest.code }}</a>
265-
<p v-else class="text-gray-400 italic">No code repository listed</p>
271+
<p v-else class="text-gray-500 italic">No code repository listed</p>
266272
<SmallMessage v-if="warnings['code']" mood="warn" :class="small_msg_classes">{{ warnings['code'] }}</SmallMessage>
267273
</DataDef>
268274

269275
<DataDef field="Funding:">
270276
<a v-if="manifest.funding" :href="manifest.funding" :class="link_classes">{{ manifest.funding }}</a>
271-
<p v-else class="text-gray-400 italic">No funding website listed</p>
277+
<p v-else class="text-gray-500 italic">No funding website listed</p>
272278
<SmallMessage v-if="warnings['funding']" mood="warn" :class="small_msg_classes">{{ warnings['funding'] }}</SmallMessage>
273279
</DataDef>
274280

0 commit comments

Comments
 (0)