Merge pull request #532 from kubero-dev/feature/improve-standallone-startup

Feature/improve standallone startup

Author: mms-gianni

client/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@mdi/font": "7.0.96",
+    "@wdns/vue-code-block": "^2.3.3",
     "apexcharts": "^3.49.0",
     "axios": "^1.7.4",
     "chart.js": "^4.4.1",
@@ -28,7 +29,8 @@
     "vue3-apexcharts": "^1.5.2",
     "vue3-cookies": "^1.0.6",
     "vuetify": "^3.4.0",
-    "xterm": "^5.3.0"
+    "xterm": "^5.3.0",
+    "yaml": "^2.6.1"
   },
   "devDependencies": {
     "@babel/types": "^7.21.4",

client/src/components/pipelines/list.vue

@@ -10,13 +10,14 @@
             <v-col class="text-right">
                 <v-btn
                 elevation="2"
+                :disabled="kubero.kubernetesVersion == 'unknown'"
                 color="primary"
                 :to="{ name: 'Pipeline Form', params: { pipeline: 'new' }}"
                 >New Pipeline</v-btn>
             </v-col>
         </v-row>
 
-        <v-row v-if="pipelines && pipelines.length < 1" class="delay-visible-enter-active">
+        <v-row v-if="(pipelines && pipelines.length < 1) && kubero.kubernetesVersion != 'unknown'" class="delay-visible-enter-active">
             <v-alert
                 color="info"
                 icon="mdi-star-outline"
@@ -43,6 +44,22 @@
                 >Create your first pipeline</v-btn>
             </v-col>
         </v-row>
+        <v-row v-if="kubero.kubernetesVersion == 'unknown'">
+            <v-alert
+                type="error"
+                prominent
+                title="Kubernetes Connection Error"
+                variant="tonal"
+                >
+                <p>Kubero can't reach your kubernetes cluster. Please proceed with the setup to continue.</p>
+
+                <v-btn
+                color="success"
+                class="mt-4"
+                :to="{ name: 'Setup', params: { step: '1' }}"
+                >Start Setup</v-btn>
+            </v-alert>
+        </v-row>
 
         <v-row v-for="item in pipelines" :key="item.name" :id="item.name">
             <v-col cols="12">
@@ -113,6 +130,7 @@ import axios from "axios";
 import { ref, defineComponent } from 'vue'
 import Breadcrumbs from "../breadcrumbs.vue";
 import { useKuberoStore } from '../../stores/kubero'
+import { mapState } from 'pinia'
 import Swal from 'sweetalert2';
 
 type Pipeline = {
@@ -172,6 +190,9 @@ export default defineComponent({
             }
         ],
     }},
+    computed: {
+      ...mapState(useKuberoStore, ['kubero']),
+    },
     methods: {
       async loadPipelinesList() {
         const self = this;