Skip to content

Commit ba3e437

Browse files
chrisbbreuerchrisbbreuer
committed
chore: wip
chore: wip chore: wip chore: wip chore: wip chore: wip chore: wip
1 parent 8dc87d5 commit ba3e437

File tree

21 files changed

+219
-123
lines changed

21 files changed

+219
-123
lines changed

‎bun.lockb‎

4.02 KB
Binary file not shown.

‎resources/components/Dashboard/Deployments/DeploymentList.stx‎

Lines changed: 201 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,212 @@
11
<script setup lang="ts">
2-
const githubStore = useGitStore()
3-
const github = useGithub()
2+
</script>
43

5-
onMounted(async () => {
6-
await githubStore.fetchWorkflowActions()
7-
})
4+
<template>
5+
<div class="min-h-screen py-4 lg:py-8 dark:bg-blue-gray-800">
6+
<div class="px-4 mb-8 sm:px-6 lg:px-8">
7+
<div>
8+
<h3 class="text-base font-semibold leading-6 text-gray-900">
9+
Last 30 days
10+
</h3>
811

9-
function getStatusColor(conclusion: string) {
10-
if (conclusion === 'success')
11-
return 'text-green-500 bg-green-100/10'
12-
else if (conclusion === 'failure')
13-
return 'text-red-500 bg-red-100/10'
12+
<dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
13+
<div class="relative overflow-hidden rounded-lg bg-white px-4 pt-5 shadow sm:px-6 sm:pt-6">
14+
<dt>
15+
<div class="absolute rounded-md bg-indigo-500 p-3">
16+
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
17+
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
18+
</svg>
19+
</div>
20+
<p class="ml-16 truncate text-sm font-medium text-gray-500">
21+
Total Deployments
22+
</p>
23+
</dt>
24+
<dd class="ml-16 flex items-baseline pb-6 sm:pb-7">
25+
<p class="text-2xl font-semibold text-gray-900">
26+
71,897
27+
</p>
28+
<p class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
29+
<svg class="h-5 w-5 flex-shrink-0 self-center text-green-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
30+
<path fill-rule="evenodd" d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z" clip-rule="evenodd" />
31+
</svg>
32+
<span class="sr-only"> Increased by </span>
33+
122
34+
</p>
1435

15-
return 'text-gray-500 bg-gray-100/10'
16-
}
17-
</script>
36+
<!-- <div class="absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6">
37+
<div class="text-sm">
38+
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">View all<span class="sr-only"> Deployments</span></a>
39+
</div>
40+
</div> -->
41+
</dd>
42+
</div>
1843

19-
<template>
20-
<main class="lg:pr-96">
21-
<header class="flex items-center justify-between border-b border-white/5 px-4 py-4 sm:px-6 sm:py-6 lg:px-8">
22-
<h1 class="text-base font-semibold leading-7 dark:text-white">
23-
Deployments
24-
</h1>
25-
26-
<!-- Sort dropdown -->
27-
<div class="relative">
28-
<button id="sort-menu-button" type="button" class="flex items-center gap-x-1 text-sm font-medium leading-6 dark:text-white" x-ref="button" aria-expanded="false" aria-haspopup="true" x-bind:aria-expanded="open.toString()" @click="onButtonClick()" @keyup.space.prevent="onButtonEnter()" @keydown.enter.prevent="onButtonEnter()" @keydown.arrow-up.prevent="onArrowUp()" @keydown.arrow-down.prevent="onArrowDown()">
29-
Sort by
30-
<svg class="h-5 w-5 text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
31-
<path fill-rule="evenodd" d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z" clip-rule="evenodd" />
32-
</svg>
33-
</button>
34-
35-
<div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute right-0 z-10 mt-2.5 w-40 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none" x-ref="menu-items" x-description="Dropdown menu, show/hide based on menu state." x-bind:aria-activedescendant="activeDescendant" role="menu" aria-orientation="vertical" aria-labelledby="sort-menu-button" tabindex="-1" style="display: none;" @keydown.arrow-up.prevent="onArrowUp()" @keydown.arrow-down.prevent="onArrowDown()" @keydown.tab="open = false" @keydown.enter.prevent="open = false; focusButton()" @keyup.space.prevent="open = false; focusButton()">
36-
<a id="sort-menu-item-0" href="#" class="block px-3 py-1 text-sm leading-6 text-gray-900" x-state:on="Active" x-state:off="Not Active" role="menuitem" tabindex="-1">Name</a>
37-
<a id="sort-menu-item-1" href="#" class="block px-3 py-1 text-sm leading-6 text-gray-900" role="menuitem" tabindex="-1">Date updated</a>
38-
<a id="sort-menu-item-2" href="#" class="block px-3 py-1 text-sm leading-6 text-gray-900" role="menuitem" tabindex="-1">Environment</a>
44+
<div class="relative overflow-hidden rounded-lg bg-white px-4 pt-5 shadow sm:px-6 sm:pt-6">
45+
<dt>
46+
<div class="absolute rounded-md bg-indigo-500 p-3">
47+
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
48+
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 9v.906a2.25 2.25 0 01-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 001.183 1.981l6.478 3.488m8.839 2.51l-4.66-2.51m0 0l-1.023-.55a2.25 2.25 0 00-2.134 0l-1.022.55m0 0l-4.661 2.51m16.5 1.615a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V8.844a2.25 2.25 0 011.183-1.98l7.5-4.04a2.25 2.25 0 012.134 0l7.5 4.04a2.25 2.25 0 011.183 1.98V19.5z" />
49+
</svg>
50+
</div>
51+
<p class="ml-16 truncate text-sm font-medium text-gray-500">
52+
Avg. Deploy Time
53+
</p>
54+
</dt>
55+
56+
<dd class="ml-16 flex items-baseline pb-6 sm:pb-7">
57+
<p class="text-2xl font-semibold text-gray-900">
58+
3.65 mins
59+
</p>
60+
61+
<p class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
62+
<svg class="h-5 w-5 flex-shrink-0 self-center text-green-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
63+
<path fill-rule="evenodd" d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z" clip-rule="evenodd" />
64+
</svg>
65+
<span class="sr-only"> Increased by </span>
66+
12 s
67+
</p>
68+
69+
<!-- <div class="absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6">
70+
<div class="text-sm">
71+
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">View all<span class="sr-only"> Average Deploy Time</span></a>
72+
</div>
73+
</div> -->
74+
</dd>
75+
</div>
76+
77+
<div class="relative overflow-hidden rounded-lg bg-white px-4 pt-5 shadow sm:px-6 sm:pt-6">
78+
<dt>
79+
<div class="absolute rounded-md bg-indigo-500 p-3">
80+
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
81+
<path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59" />
82+
</svg>
83+
</div>
84+
<p class="ml-16 truncate text-sm font-medium text-gray-500">
85+
Success Rate
86+
</p>
87+
</dt>
88+
89+
<dd class="ml-16 flex items-baseline pb-6 sm:pb-7">
90+
<p class="text-2xl font-semibold text-gray-900">
91+
94.57%
92+
</p>
93+
94+
<p class="ml-2 flex items-baseline text-sm font-semibold text-red-600">
95+
<svg class="h-5 w-5 flex-shrink-0 self-center text-red-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
96+
<path fill-rule="evenodd" d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z" clip-rule="evenodd" />
97+
</svg>
98+
<span class="sr-only"> Decreased by </span>
99+
3.2%
100+
</p>
101+
102+
<!-- <div class="absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6">
103+
<div class="text-sm">
104+
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">View all<span class="sr-only"> Success Rate</span></a>
105+
</div>
106+
</div> -->
107+
</dd>
108+
</div>
109+
</dl>
110+
</div>
111+
</div>
112+
113+
<div class="px-4 sm:px-6 lg:px-8 pt-12">
114+
<div class="sm:flex sm:items-center">
115+
<div class="sm:flex-auto">
116+
<h1 class="text-base font-semibold leading-6 text-gray-900">
117+
Deployment History
118+
</h1>
119+
<p class="mt-2 text-sm text-gray-700">
120+
A list of all the deployments relating your project/s.
121+
</p>
122+
</div>
123+
<div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
124+
<button type="button" class="block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
125+
Deploy
126+
</button>
39127
</div>
40128
</div>
41-
</header>
42-
43-
<!-- Deployment list -->
44-
<ul v-if="githubStore.hasWorkflowRuns" role="list" class="divide-y divide-gray-200">
45-
<li v-for="(workflow, index) in githubStore.getWorkflowRuns" :key="index" class="relative flex items-center space-x-4 px-4 py-4 sm:px-6 lg:px-8">
46-
<div class="min-w-0 flex-auto">
47-
<div class="flex items-center gap-x-3">
48-
<div class="flex-none rounded-full p-1" :class="getStatusColor(workflow.conclusion)">
49-
<div class="h-2 w-2 rounded-full bg-current" />
129+
130+
<div class="mt-8 flow-root">
131+
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
132+
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
133+
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
134+
<table class="min-w-full divide-y divide-gray-300">
135+
<thead class="bg-gray-50">
136+
<tr>
137+
<th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
138+
When
139+
</th>
140+
141+
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
142+
Initiated By
143+
</th>
144+
145+
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
146+
Commit
147+
</th>
148+
149+
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
150+
Branch
151+
</th>
152+
153+
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
154+
Status
155+
</th>
156+
157+
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
158+
<span class="sr-only">Edit</span>
159+
</th>
160+
</tr>
161+
</thead>
162+
163+
<tbody class="divide-y divide-gray-200 bg-white">
164+
<tr>
165+
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
166+
Moments ago
167+
</td>
168+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
169+
<div class="flex items-center">
170+
<div class="flex-shrink-0 w-10 h-10">
171+
<img
172+
src="https://carefreeagency-eliinova.s3.amazonaws.com/images/avatar/default.svg"
173+
alt=""
174+
class="w-10 h-10 rounded-full"
175+
>
176+
</div>
177+
<div class="ml-4">
178+
<div class="flex items-center text-sm font-medium text-gray-900 dark:text-gray-100">
179+
Chris Breuer
180+
</div>
181+
<div class="text-sm text-gray-500 dark:text-gray-400 dark:text-gray-300">
182+
chris@stacksjs.org
183+
</div>
184+
</div>
185+
</div>
186+
</td>
187+
188+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
189+
342afe5a
190+
</td>
191+
192+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
193+
main
194+
</td>
195+
196+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
197+
Deployed
198+
</td>
199+
200+
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
201+
<a href="#" class="text-indigo-600 hover:text-indigo-900">View<span class="sr-only">, Deployment</span></a>
202+
</td>
203+
</tr>
204+
</tbody>
205+
</table>
50206
</div>
51-
<h2 class="min-w-0 text-sm font-semibold leading-6 dark:text-white">
52-
<router-link :to="`deployments/${workflow.id}`" class="flex gap-x-2">
53-
<span class="truncate">stacksjs</span>
54-
<span class="text-gray-400">/</span>
55-
<span class="whitespace-nowrap">stacks</span>
56-
<span class="absolute inset-0" />
57-
</router-link>
58-
</h2>
59-
</div>
60-
<div class="mt-3 flex items-center gap-x-2.5 text-xs leading-5 text-gray-400">
61-
<p class="truncate">
62-
Deploys from GitHub
63-
</p>
64-
<svg viewBox="0 0 2 2" class="h-0.5 w-0.5 flex-none fill-gray-300">
65-
<circle cx="1" cy="1" r="1" />
66-
</svg>
67-
<p class="whitespace-nowrap">
68-
Initiated {{ github.getTimeDifference(workflow.created_at) }} ago
69-
</p>
70207
</div>
71208
</div>
72-
<!-- <div class="rounded-full flex-none py-1 px-2 text-xs font-medium ring-1 ring-inset text-gray-400 bg-gray-400/10 ring-gray-400/20">Preview</div> -->
73-
<svg class="h-5 w-5 flex-none text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
74-
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
75-
</svg>
76-
</li>
77-
</ul>
78-
</main>
209+
</div>
210+
</div>
211+
</div>
79212
</template>

‎resources/stores/git.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { acceptHMRUpdate, defineStore } from 'pinia'
21
import type { GithubCommit, WorkflowRun } from '../types/git'
32

43
const owner = 'stacksjs'
@@ -18,6 +17,7 @@ export const useGitStore = defineStore('git', {
1817
workflowRun: {} as WorkflowRun,
1918
}
2019
},
20+
2121
actions: {
2222
async fetchCommits(): Promise<void> {
2323
const fetch = await useHttpFetch(apiUrl)
@@ -28,6 +28,7 @@ export const useGitStore = defineStore('git', {
2828

2929
this.commitLists = response
3030
},
31+
3132
async fetchWorkflowActions(): Promise<void> {
3233
const fetch = await useHttpFetch(apiUrl)
3334

@@ -37,6 +38,7 @@ export const useGitStore = defineStore('git', {
3738

3839
this.workflowRuns = response.workflow_runs
3940
},
41+
4042
async fetchWorkflowAction(id: number): Promise<void> {
4143
const fetch = await useHttpFetch(apiUrl)
4244

@@ -47,6 +49,7 @@ export const useGitStore = defineStore('git', {
4749
this.workflowRun = response
4850
},
4951
},
52+
5053
getters: {
5154
getCommits(state): GithubCommit[] {
5255
return state.commitLists

‎resources/stores/user.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { acceptHMRUpdate, defineStore } from 'pinia'
2-
31
export const useUserStore = defineStore('user', () => {
42
/**
53
* Current name of the user.

‎resources/views/dashboard/commands/index.stx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
<script setup lang="ts">
2-
import { ref } from 'vue'
3-
import AppButton from '../../components/Buttons/AppButton.stx'
4-
52
useHead({
63
title: 'Dashboard - Commands',
74
})
@@ -15,9 +12,9 @@ const dummyRef: DummyRefItem[] = [
1512
ref(false),
1613
]
1714

18-
function toggleDropdown(index: number) {
19-
dummyRef[index].value = !dummyRef[index].value
20-
}
15+
// function toggleDropdown(index: number) {
16+
// dummyRef[index].value = !dummyRef[index].value
17+
// }
2118
</script>
2219

2320
<template>

‎resources/views/dashboard/dependencies/index.stx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
<script lang="ts" setup>
2-
import AppButton from '../../components/Buttons/AppButton.stx'
3-
42
useHead({
53
title: 'Dashboard - Dependencies',
64
})

‎resources/views/dashboard/deployments/index.stx‎

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,7 @@ useHead({
55
</script>
66

77
<template>
8-
<!-- <div class="px-4 mb-4 sm:px-6 lg:px-8 mt-8">
9-
<div>
10-
<div class="flex items-center justify-between">
11-
<div class="flex items-start text-xl font-medium text-gray-900 sm:mx-none sm:mr-auto dark:text-gray-100">
12-
<h1 class="font-semibold text-2xl dark:text-gray-200 text-gray-700">
13-
stacks.dev
14-
</h1>
15-
</div>
16-
<div class="flex items-center">
17-
<AppButton passed-class="primary-button" loading-text="Deploying..." button-text="Deploy">
18-
<template #icon>
19-
<div class="i-heroicons-cloud-arrow-up w-6 h-6 mr-2" />
20-
</template>
21-
</AppButton>
22-
</div>
23-
</div>
24-
</div>
25-
</div> -->
26-
278
<DeploymentList />
289

29-
<ActivityFeed />
10+
<!-- <ActivityFeed /> -->
3011
</template>

‎resources/views/dashboard/dns/index.stx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
<script setup lang="ts">
2-
import { ref } from 'vue'
3-
import AppButton from '../../components/Buttons/AppButton.stx'
4-
52
useHead({
63
title: 'Dashboard - DNS',
74
})

‎resources/views/dashboard/index.stx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
<script setup lang="ts">
22
/* eslint-disable vue/valid-v-on */
3-
// import Alert from '../../components/Dashboard/Modals/Popups/Alert.stx'
4-
// import BaseModal from '../../components/Dashboard/Modals/Popups/BaseModal.stx'
53
</script>
64

75
<template>

0 commit comments

Comments
 (0)