feat(ui): add a news feeds

Author: tchiotludo

Diff for: core/src/main/java/io/kestra/core/services/CollectorService.java

@@ -1,11 +1,9 @@
 package io.kestra.core.services;
 
 import io.kestra.core.models.ServerType;
-import io.kestra.core.models.Setting;
 import io.kestra.core.models.collectors.*;
 import io.kestra.core.repositories.ExecutionRepositoryInterface;
 import io.kestra.core.repositories.FlowRepositoryInterface;
-import io.kestra.core.repositories.SettingRepositoryInterface;
 import io.kestra.core.serializers.JacksonMapper;
 import io.kestra.core.utils.IdUtils;
 import io.kestra.core.utils.VersionProvider;
@@ -19,14 +17,14 @@
 import io.micronaut.http.client.exceptions.HttpClientResponseException;
 import io.micronaut.http.hateoas.JsonError;
 import io.micronaut.rxjava2.http.client.RxHttpClient;
+import jakarta.inject.Inject;
+import jakarta.inject.Singleton;
 import lombok.extern.slf4j.Slf4j;
 
 import java.lang.management.ManagementFactory;
 import java.net.URI;
 import java.time.Instant;
 import java.time.ZoneId;
-import jakarta.inject.Inject;
-import jakarta.inject.Singleton;
 
 @Singleton
 @Slf4j
@@ -47,7 +45,7 @@ public class CollectorService {
     private ExecutionRepositoryInterface executionRepository;
 
     @Inject
-    private SettingRepositoryInterface settingRepository;
+    private InstanceService instanceService;
 
     @Inject
     private VersionProvider versionProvider;
@@ -69,17 +67,9 @@ protected synchronized Usage defaultUsage() {
         boolean first = defaultUsage == null;
 
         if (first) {
-            Setting instanceIdSetting = settingRepository
-                .findByKey(Setting.INSTANCE_UUID)
-                .orElseGet(() -> settingRepository.save(Setting.builder()
-                    .key(Setting.INSTANCE_UUID)
-                    .value(IdUtils.create())
-                    .build()
-                ));
-
             defaultUsage = Usage.builder()
                 .startUuid(UUID)
-                .instanceUuid(instanceIdSetting.getValue().toString())
+                .instanceUuid(instanceService.fetch())
                 .serverType(serverType)
                 .version(versionProvider.getVersion())
                 .zoneId(ZoneId.systemDefault())

Diff for: core/src/main/java/io/kestra/core/services/InstanceService.java

@@ -0,0 +1,31 @@
+package io.kestra.core.services;
+
+import io.kestra.core.models.Setting;
+import io.kestra.core.repositories.SettingRepositoryInterface;
+import io.kestra.core.utils.IdUtils;
+import jakarta.inject.Inject;
+import jakarta.inject.Singleton;
+import lombok.extern.slf4j.Slf4j;
+
+@Singleton
+@Slf4j
+public class InstanceService {
+    @Inject
+    private SettingRepositoryInterface settingRepository;
+
+    private Setting instanceIdSetting;
+
+    public String fetch() {
+        if (this.instanceIdSetting == null) {
+            instanceIdSetting = settingRepository
+                .findByKey(Setting.INSTANCE_UUID)
+                .orElseGet(() -> settingRepository.save(Setting.builder()
+                    .key(Setting.INSTANCE_UUID)
+                    .value(IdUtils.create())
+                    .build()
+                ));
+        }
+
+        return this.instanceIdSetting.getValue().toString();
+    }
+}

Diff for: ui/src/App.vue

@@ -23,6 +23,7 @@
     import NprogressContainer from "vue-nprogress/src/NprogressContainer";
     import Errors from "./components/errors/Errors";
     import {mapState} from "vuex";
+    import Utils from "./utils/utils";
 
     export default {
         name: "App",
@@ -71,8 +72,21 @@
                 });
             },
             loadGeneralRessources() {
+                let uid = localStorage.getItem("uid");
+                if (uid === null) {
+                    uid = Utils.uid();
+                    localStorage.setItem("uid", uid);
+                }
+
                 this.$store.dispatch("plugin/icons")
                 this.$store.dispatch("misc/loadConfigs")
+                    .then(value => {
+                        this.$store.dispatch("api/loadFeeds", {
+                            version: value.version,
+                            iid: value.uuid,
+                            uid: uid,
+                        });
+                    })
             },
             grabThemeResources() {
                 // eslint-disable-next-line no-undef

Diff for: ui/src/components/layout/DateAgo.vue

@@ -13,14 +13,18 @@
             inverted: {
                 type: Boolean,
                 default: false
+            },
+            format: {
+                type: String,
+                default: "LLLL"
             }
         },
         computed: {
             from() {
                 return Vue.moment(this.date).fromNow();
             },
             full() {
-                return Vue.moment(this.date).format("LLLL");
+                return Vue.moment(this.date).format(this.format);
             }
         }
     };

Diff for: ui/src/components/layout/News.vue

@@ -0,0 +1,143 @@
+<template>
+    <b-nav-item>
+        <a class="news-link" v-b-modal="`news-modal`">
+            <gift title="" />
+            <CheckboxBlankCircle v-if="hasUnread" class="new" title="" />
+        </a>
+
+        <b-modal
+            id="news-modal"
+            :title="$t('feeds.title')"
+            hide-backdrop
+            hide-footer
+            modal-class="right"
+            size="xl"
+            @show="show"
+        >
+            <div class="post" v-for="(feed, index) in feeds" :key="feed.id">
+                <div v-if="feed.image" class="mt-2">
+                    <img class="float-right" :src="feed.image" alt="">
+                </div>
+                <h5>
+                    {{ feed.title }}
+                </h5>
+                <date-ago class="text-muted small" :inverted="true" :date="feed.publicationDate" format="LL" />
+
+
+                <markdown class="markdown-tooltip mt-3" :source="feed.description" />
+
+                <a class="mt-3 d-block text-right" :href="feed.href" target="_blank">{{ feed.link }} <OpenInNew /></a>
+
+                <hr v-if="index !== feeds.length - 1" class="text-white">
+            </div>
+        </b-modal>
+    </b-nav-item>
+</template>
+
+<script>
+    import {mapState} from "vuex";
+    import Gift from "vue-material-design-icons/Gift";
+    import OpenInNew from "vue-material-design-icons/OpenInNew";
+    import CheckboxBlankCircle from "vue-material-design-icons/CheckboxBlankCircle";
+    import Markdown from "./Markdown";
+    import DateAgo from "./DateAgo";
+
+    export default {
+        components: {
+            Gift,
+            OpenInNew,
+            CheckboxBlankCircle,
+            Markdown,
+            DateAgo
+        },
+        data() {
+            return {
+                hasUnread: false,
+            };
+        },
+        mounted() {
+            this.hasUnread = this.isUnread();
+        },
+        watch: {
+            feeds() {
+                this.hasUnread = this.isUnread();
+            }
+        },
+        methods: {
+            show() {
+                localStorage.setItem("feeds", this.feeds[0].publicationDate)
+                this.hasUnread = this.isUnread();
+            },
+            isUnread() {
+                let storage = localStorage.getItem("feeds");
+                return (
+                    storage === null ||
+                    (this.feeds && this.feeds[0] && this.$moment(storage).isBefore(this.feeds[0].publicationDate))
+                );
+            },
+        },
+        computed: {
+            ...mapState("misc", ["configs"]),
+            ...mapState("api", ["feeds"]),
+
+
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/variable";
+.news-link {
+    font-size: $font-size-lg;
+    color: var(--gray-600);
+}
+
+.new {
+    font-size: $font-size-xs;
+    color: $red;
+    position: absolute;
+    margin-left: -8px;
+
+    animation-name: grow;
+    animation-duration: 1.5s;
+    animation-iteration-count: infinite;
+    animation-timing-function: ease-in;
+}
+
+@keyframes grow {
+    0% {
+        transform: scale(0.8);
+    }
+    50%  {
+        transform: scale(1.2);
+    }
+    100% {
+        transform: scale(0.8);
+    }
+}
+
+.post {
+    h5 {
+        font-weight: bold;
+        margin-bottom: 0;
+    }
+
+    img {
+        max-height: 120px;
+        max-width: 240px;
+        padding-left: 20px;
+        padding-bottom: 20px;
+    }
+
+    hr {
+        border-top-color: var(--gray-700);
+        margin-top: $spacer * 2;
+        margin-bottom: $spacer * 2;
+    }
+
+    a.d-block {
+        font-weight: bold;
+    }
+}
+
+</style>

Diff for: ui/src/components/layout/TopNavBar.vue

@@ -15,18 +15,23 @@
                 </b-breadcrumb>
             </b-nav-text>
         </b-navbar-nav>
-        <Auth />
+        <b-navbar-nav class="ml-auto pt-3">
+            <Auth />
+            <news />
+        </b-navbar-nav>
     </b-navbar>
 </template>
 <script>
     import {mapState} from "vuex";
     import HomeOutline from "vue-material-design-icons/HomeOutline";
     import Auth from "override/components/auth/Auth";
+    import News from "../layout/News";
 
     export default {
         components: {
             HomeOutline,
             Auth,
+            News,
         },
         props: {
             menuCollapsed : {

Diff for: ui/src/stores/api.js

@@ -0,0 +1,29 @@
+import Vue from "vue"
+
+export default {
+    namespaced: true,
+    state: {
+        feeds: [],
+    },
+
+    actions: {
+        loadFeeds({commit}, options) {
+            return Vue.axios.get("https://api.kestra.io/v1/feeds/latest", {
+                params: {
+                    iid: options.iid,
+                    uid: options.uid,
+                    version: options.version
+                }
+            }).then(response => {
+                commit("setFeeds", response.data)
+
+                return response.data;
+            })
+        }
+    },
+    mutations: {
+        setFeeds(state, feeds) {
+            state.feeds = feeds
+        }
+    }
+}

Diff for: ui/src/stores/store.js

@@ -1,3 +1,4 @@
+import api from "./api"
 import auth from "./auth"
 import core from "./core"
 import execution from "./executions"
@@ -15,6 +16,7 @@ import taskrun from "./taskruns"
 
 export default {
     modules: {
+        api,
         core,
         settings,
         flow,

Diff for: ui/src/styles/layout/bootstrap.scss

@@ -678,6 +678,14 @@ ul.nav-tabs {
             font-weight: bold;
         }
     }
+
+    .modal-content {
+        border: 1px solid var(--gray-300);
+    }
+
+    .modal-header {
+        border-bottom: 1px solid var(--gray-300);
+    }
 }
 
 .modal.left,
@@ -694,6 +702,8 @@ ul.nav-tabs {
         height: 100%;
         border-radius: 0;
         overflow-y: auto;
+        border-bottom: 0;
+        border-top: 0;
 
         header {
             border-radius: 0;

Diff for: ui/src/translations.json

@@ -235,7 +235,10 @@
     "tags": "Tags",
     "disabled flow title": "This flow is disabled",
     "disabled flow desc": "This flow is disabled, please enable it in order to execute it.",
-    "labels": "Labels"
+    "labels": "Labels",
+    "feeds": {
+      "title": "What's new at Kestra"
+    }
   },
   "fr": {
     "id": "Identifiant",
@@ -474,6 +477,9 @@
     "tags": "Tags",
     "disabled flow title": "Ce flux est désactivé",
     "disabled flow desc": "Ce flux est désactivé, veuillez le réactiver pour l'exécuter.",
-    "labels": "Labels"
+    "labels": "Labels",
+    "feeds": {
+      "title": "Quoi de neuf sur Kestra"
+    }
   }
 }