Merge pull request #279 from cloudcloud/fix/source-dirs

Fixes from the vue3 upgrade
cloudcloud · Apr 18, 2024 · 07b06d2 · 07b06d2
2 parents eacf51d + 5561677
commit 07b06d2
Show file tree

Hide file tree

Showing 18 changed files with 105 additions and 92 deletions.
diff --git a/.github/workflows/main-build.yml b/.github/workflows/main-build.yml
@@ -1,4 +1,4 @@
-name: roadie standard commit build
+name: build
 
 on:
   push:
@@ -25,11 +25,9 @@ jobs:
       - name: 'Setup Node'
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
       - name: 'Build Frontend Artefacts'
         run: yarn && NODE_OPTIONS=--openssl-legacy-provider yarn build
-      - name: 'Mirror Dist'
-        run: cp -r ./dist ./pkg/server/dist
       - name: 'Run Tests'
         run: go test -cover -coverprofile=coverage.txt ./...
       - name: 'Archive Coverage Results'
@@ -67,11 +65,9 @@ jobs:
       - name: 'Setup Node'
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
       - name: 'Build Frontend Artefacts'
         run: yarn && NODE_OPTIONS=--openssl-legacy-provider yarn build
-      - name: 'Mirror Dist'
-        run: cp -r ./dist ./pkg/server/dist
       - name: 'Matrix Binary Compilation'
         run: GOOS=${{ matrix.os }} GOARCH=${{ matrix.arch }} go build -o dist/roadie.${{ matrix.arch }}-${{ matrix.os }} ./cmd/roadie
       - name: 'Archive Binary'

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -1,4 +1,4 @@
-name: release build
+name: release
 
 on:
   push:
@@ -25,11 +25,9 @@ jobs:
       - name: 'Setup Node'
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
       - name: 'Build Frontend Artefacts'
         run: yarn && NODE_OPTIONS=--openssl-legacy-provider yarn build
-      - name: 'Mirror Dist'
-        run: cp -r ./dist ./pkg/server/dist
       - name: 'Compile Binary'
         run: mkdir bin && GOOS=${{ matrix.os }} GOARCH=amd64 go build -o bin/roadie-${{ matrix.os }}-amd64 ./cmd/roadie
       - name: 'Archive Binary'

diff --git a/Dockerfile b/Dockerfile
@@ -8,9 +8,8 @@ FROM golang:alpine AS be
 
 WORKDIR "/rd"
 COPY . .
-COPY --from=fe ["/app/dist/", "dist/"]
+COPY --from=fe ["/app/pkg/server/dist/", "pkg/server/dist/"]
 RUN apk add --no-cache git && \
-    cp -r ./dist ./pkg/server/dist && \
     go build ./cmd/roadie && \
     mv roadie /
 

diff --git a/Makefile b/Makefile
@@ -14,7 +14,6 @@ binaries: ; $(info $(C) building all binaries)
 binary: GOARCH?=amd64
 binary: GOOS?=linux
 binary: ; $(info $(C) building binary $(PROJECT).$(GOARCH)-$(GOOS))
-	$V cp -r ./dist ./pkg/server/dist
 	$V $(GO) build -o dist/$(PROJECT).$(GOARCH)-$(GOOS) ./cmd/$(PROJECT)
 	$V if [ "$(GOOS)" = "windows" ]; then \
 		$V mv dist/$(PROJECT).$(GOARCH)-$(GOOS) dist/$(PROJECT).$(GOARCH)-$(GOOS).exe; \
@@ -24,15 +23,15 @@ build-fe: ; $(info $(C) building the frontend assets)
 	$V yarn && NODE_OPTIONS=--openssl-legacy-provider yarn build
 
 clean: ; $(info $(C) cleaning assets and dist)
-	$V rm -rf dist pkg/server/dist
+	$V rm -rf pkg/server/dist
 
 coverage: ; $(info $(C) running coverage)
 	$V $(GO) test -race -covermode=atomic -coverprofile=c.out ./...
 	$V sed -i '' '/^github.com\/cloudcloud\/roadie\/pkg\/server\/assets.go.*/d' c.out
 	$V $(GO) tool cover -html=c.out -o cover.html
 
 # at this time, there's no watch enabled for the go binary
-dev-be: bin-prep bin-dist install ; $(info $(C) building back-end for dev)
+dev-be: install ; $(info $(C) building back-end for dev)
 	$V CONFIG_FILE=$(CONFIG_FILE) $(PROJECT)
 
 # dev-fe is a watch task with built-in node server
@@ -46,7 +45,6 @@ docker.push:
 	$V docker push cloudcloud/roadie:latest
 
 install: build-fe ; $(info $(C) installing $(PROJECT))
-	$V rm -rf ./pkg/server/dist && cp -r ./dist ./pkg/server/dist
 	$V $(GO) build ./cmd/$(PROJECT)/
 
 local:

diff --git a/package.json b/package.json
@@ -14,15 +14,15 @@
     "sass": "1.75.0",
     "sass-loader": "14.2.1",
     "vue": "^3.4.23",
-    "vue-router": "4.3.1",
+    "vue-router": "4.3.2",
     "vuetify": "^3.5.16",
     "vuex": "4.1.0",
     "webpack": "5.91.0",
     "webpack-plugin-vuetify": "^3.0.3",
     "y18n": "5.0.8"
   },
   "devDependencies": {
-    "@mdi/font": "7.4.47",
+    "@mdi/font": "^7.4.47",
     "@mdi/js": "7.4.47",
     "@vue/cli-plugin-babel": "5.0.8",
     "@vue/cli-service": "5.0.8",

diff --git a/pkg/server/server.go b/pkg/server/server.go
@@ -138,8 +138,8 @@ func index(c *gin.Context) {
 
 	s := strings.Replace(
 		string(f),
-		"<head>",
-		"<head><script id=\"config\">{\"hostname\":\""+c.MustGet("config").(types.Configer).GetHostname()+"\"}</script>",
+		"[ROADIE_BASE_URL]",
+		c.MustGet("config").(types.Configer).GetHostname(),
 		1,
 	)
 

diff --git a/public/index.html b/public/index.html
@@ -7,7 +7,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>roadie</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
+    <meta id="RoadieBaseURL" content="[ROADIE_BASE_URL]">
   </head>
   <body>
     <noscript>

diff --git a/src/api.js b/src/api.js
@@ -1,11 +1,10 @@
 import axios from 'axios';
 
-const el = document.getElementById('config');
-const c = JSON.parse(el.innerHTML);
+const url = document.querySelector('#RoadieBaseURL').getAttribute('content');
 const client = axios.create({
-  baseURL: c.hostname,
+  baseURL: url,
   json: true,
-})
+});
 
 const apiClient = {
   getConfig() {

diff --git a/src/components/Destination.vue b/src/components/Destination.vue
@@ -8,11 +8,13 @@
           <v-card-title>
             <v-row justify="center" align="center">
               <v-col cols="6" align="left">
-                <span>destination</span> | <span>{{destination_name}}</span>
+                <span>destination <v-icon :icon="`${mdiArrowRightThinCircleOutline}`"></v-icon> {{destination_name}}</span>
               </v-col>
 
               <v-col cols="6">
-                <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line hide-details />
+                <v-text-field v-model="search" single-line hide-details clearable variant="underlined">
+                  <v-icon :icon="`${mdiMagnify}`"></v-icon>
+                </v-text-field>
               </v-col>
             </v-row>
           </v-card-title>
@@ -53,12 +55,15 @@
 
 <script>
 import { mapActions, mapMutations, mapGetters } from 'vuex';
+import { mdiArrowRightThinCircleOutline, mdiMagnify } from '@mdi/js';
 
 export default {
   data: () => ({
+    mdiMagnify,
+    mdiArrowRightThinCircleOutline,
     headers: [
-      {text: 'Name', align: 'left', value: 'entry'},
-      {text: 'Actions', value: 'action'},
+      {title: 'Name', align: 'left', key: 'entry'},
+      {title: 'Actions', key: 'action'},
     ],
     destination: {},
     dialog: false,

diff --git a/src/components/Destinations.vue b/src/components/Destinations.vue
@@ -12,7 +12,9 @@
               </v-col>
 
               <v-col cols="6">
-                <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line hide-details></v-text-field>
+                <v-text-field v-model="search" single-line hide-details clearable placeholder="evil" variant="underlined">
+                  <v-icon :icon="`${mdiMagnify}`"></v-icon>
+                </v-text-field>
               </v-col>
             </v-row>
           </v-card-title>
@@ -32,13 +34,15 @@
 
 <script>
 import { mapActions, mapMutations, mapGetters } from 'vuex';
+import { mdiMagnify } from '@mdi/js';
 
 export default {
   data: () => ({
+    mdiMagnify,
     headers: [
-      {text: 'Name', align: 'left', value: 'name'},
-      {text: 'Location', align: 'left', value: 'config.location'},
-      {text: 'Type', align: 'left', value: 'type'},
+      {title: 'Name', align: 'left', key: 'name'},
+      {title: 'Location', align: 'left', key: 'config.location'},
+      {title: 'Type', align: 'left', key: 'type'},
     ],
     destinations: [],
     search: '',

diff --git a/src/components/Home.vue b/src/components/Home.vue
@@ -10,7 +10,9 @@
               <v-col cols="6" align="left">roadie</v-col>
 
               <v-col cols="6">
-                <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line hide-details />
+                <v-text-field v-model="search" clearable variant="underlined" single-line hide-details>
+                  <v-icon :icon="`${mdiMagnify}`"></v-icon>
+                </v-text-field>
               </v-col>
             </v-row>
           </v-card-title>
@@ -33,14 +35,16 @@
 
 <script>
 import { mapActions, mapMutations, mapGetters } from 'vuex';
+import { mdiMagnify } from '@mdi/js';
 
 export default {
   data: () => ({
+    mdiMagnify,
     headers: [
-      {text: 'Source', align: 'left', value: 'source.name'},
-      {text: 'Destination', align: 'left', value: 'destination.name'},
-      {text: 'Pattern', align: 'left', value: 'pattern'},
-      {text: 'Date', align: 'left', value: 'occurred_at'},
+      {title: 'Source', align: 'left', key: 'source.name'},
+      {title: 'Destination', align: 'left', key: 'destination.name'},
+      {title: 'Pattern', align: 'left', key: 'pattern'},
+      {title: 'Date', align: 'left', key: 'occurred_at'},
     ],
     historical: [],
     search: '',

diff --git a/src/components/Source.vue b/src/components/Source.vue
@@ -8,16 +8,18 @@
           <v-card-title>
             <v-row justify="center" align="center">
               <v-col cols="6" align="left">
-                <span>source</span> | <span>{{source_name}}</span>
+                <span>source <v-icon :icon="`${mdiArrowRightThinCircleOutline}`"></v-icon> {{source_name}}</span>
               </v-col>
 
               <v-col cols="6">
-                <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line hide-details />
+                <v-text-field v-model="search" single-line hide-details clearable placeholder="evil" variant="underlined">
+                  <v-icon :icon="`${mdiMagnify}`"></v-icon>
+                </v-text-field>
               </v-col>
             </v-row>
           </v-card-title>
 
-          <v-data-table :headers="headersExpanded" :items="source.entries" :search="search" :single-expand="singleExpand" :expanded.sync="expanded" item-key="entry" show-expand class="elevation-1" v-if="isExpandable">
+          <v-data-table-virtual :headers="headersExpanded" :items="source.entries" :search="search" :single-expand="singleExpand" :expanded.sync="expanded" item-key="entry" show-expand class="elevation-1" height="100%" v-if="isExpandable">
             <template v-slot:item.action="{ item }">
               <v-btn block small @click="copy(item.entry)">Copy</v-btn>
             </template>
@@ -26,13 +28,15 @@
                 <SubSource :sub_name="item.entry" :source_name="source.source.name" />
               </td>
             </template>
-          </v-data-table>
+          </v-data-table-virtual>
 
-          <v-data-table v-else :headers="headers" :items="source.entries" :search="search" class="elevation-1">
+          <v-data-table-virtual v-else height="500" :headers="headers" :items="source.entries" :search="search" class="elevation-1">
             <template v-slot:item.action="{ item }">
-              <v-btn block small @click="copy(item.entry)">Copy</v-btn>
+              <v-btn block small @click="copy(item.entry)">
+                <v-icon icon="mdi-content-copy" /> Copy
+              </v-btn>
             </template>
-          </v-data-table>
+          </v-data-table-virtual>
 
           <v-dialog v-model="dialog" max-width="500">
             <v-card :loading="loading" class="mx-auto">
@@ -67,17 +71,20 @@
 <script>
 import { mapActions, mapMutations, mapGetters } from 'vuex';
 import SubSource from './SubSource';
+import { mdiArrowRightThinCircleOutline, mdiMagnify } from '@mdi/js';
 
 export default {
   data: () => ({
+    mdiArrowRightThinCircleOutline,
+    mdiMagnify,
     headers: [
-      {text: 'Name', align: 'left', value: 'entry'},
-      {text: 'Actions', value: 'action'},
+      {title: 'Name', align: 'left', key: 'entry'},
+      {title: 'Actions', key: 'action'},
     ],
     headersExpanded: [
-      {text: 'Expand', value: 'data-table-expand'},
-      {text: 'Name', align: 'left', value: 'entry'},
-      {text: 'Actions', value: 'action'},
+      {title: 'Expand', key: 'data-table-expand'},
+      {title: 'Name', align: 'left', key: 'entry'},
+      {title: 'Actions', key: 'action'},
     ],
     source: {},
     dialog: false,

diff --git a/src/components/Sources.vue b/src/components/Sources.vue
@@ -10,16 +10,18 @@
               <v-col cols="6" align="left">sources</v-col>
 
               <v-col cols="6">
-                <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line hide-details />
+                <v-text-field v-model="search" variant="underlined" clearable placeholder="evil" single-line hide-details>
+                  <v-icon :icon="`${mdiMagnify}`"></v-icon>
+                </v-text-field>
               </v-col>
             </v-row>
           </v-card-title>
 
-          <v-data-table :headers="headers" :items="sources" :search="search" class="elevation-1">
+          <v-data-table-virtual :headers="headers" :items="sources" :search="search" class="elevation-1">
             <template v-slot:item.name="{ item }">
               <router-link :to="item.href">{{ item.name }}</router-link>
             </template>
-          </v-data-table>
+          </v-data-table-virtual>
 
         </v-card>
       </v-col>
@@ -30,14 +32,16 @@
 
 <script>
 import { mapActions, mapMutations, mapGetters } from 'vuex';
+import { mdiMagnify } from '@mdi/js';
 
 export default {
   data: () => ({
+    mdiMagnify,
     headers: [
-      {text: 'Name', align: 'left', value: 'name'},
-      {text: 'Bucket', align: 'left', value: 'config.bucket'},
-      {text: 'Path', align: 'left', value: 'config.path'},
-      {text: 'Type', align: 'left', value: 'type'},
+      {title: 'Name', align: 'left', key: 'name'},
+      {title: 'Bucket', align: 'left', key: 'config.bucket'},
+      {title: 'Path', align: 'left', key: 'config.path'},
+      {title: 'Type', align: 'left', key: 'type'},
     ],
     sources: [],
     search: '',

diff --git a/src/components/SubSource.vue b/src/components/SubSource.vue
@@ -37,8 +37,8 @@ import { mapActions, mapMutations, mapGetters } from 'vuex';
 export default {
   data: () => ({
     headers: [
-      {text: 'Name', align: 'left', value: 'entry'},
-      {text: 'Actions', value: 'action'},
+      {title: 'Name', align: 'left', key: 'entry'},
+      {title: 'Actions', key: 'action'},
     ],
     sub_source: {},
     dialog: false,

diff --git a/src/main.js b/src/main.js
@@ -2,24 +2,9 @@ import { createApp } from 'vue';
 import App from './App.vue';
 
 import 'vuetify/styles';
-import { createVuetify } from 'vuetify';
-import * as components from 'vuetify/components';
-import * as directives from 'vuetify/directives';
-import { aliases, mdi } from 'vuetify/iconsets/mdi';
 
+import vuetify from './plugins/vuetify';
 import router from './routes';
 import store from './store';
 
-const vuetify = createVuetify({
-  components,
-  directives,
-  icons: {
-    defaultSet: 'mdi',
-    aliases,
-    sets: {
-      mdi,
-    },
-  },
-});
-
 createApp(App).use(vuetify).use(router).use(store).mount('#app');