Post news feed to user menu

openc3-cosmos-cmd-tlm-api/app/controllers/news_controller.rb

@@ -0,0 +1,25 @@
+# encoding: ascii-8bit
+
+# Copyright 2024 OpenC3, Inc.
+# All Rights Reserved.
+#
+# This program is free software; you can modify and/or redistribute it
+# under the terms of the GNU Affero General Public License
+# as published by the Free Software Foundation; version 3 with
+# attribution addendums as found in the LICENSE.txt
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+
+# This file may also be used under the terms of a commercial license
+# if purchased from OpenC3, Inc.
+
+require 'openc3/models/news_model'
+
+class NewsController < ApplicationController
+  def index
+    render json: OpenC3::NewsModel.all()
+  end
+end

openc3-cosmos-cmd-tlm-api/config/routes.rb

@@ -196,6 +196,7 @@
     get "/internal/metrics" => "internal_metrics#index"
     get "/internal/status" => "internal_status#status"
 
+    get "/news" => "news#index"
     get "/time" => "time#get_current"
     get "map.json" => "tools#importmap"
     get "auth.js" => "tools#auth"

openc3-cosmos-init/plugins/README.md

@@ -39,7 +39,7 @@ applications, described in the steps above.
 ## Developing OpenC3 Common Packages
 
 There are two packages that contain shared code between OpenC3 frontend applications: openc3-js-common and
-openc3-vue-common. openc3-js-common contains framework-agnostic JavaScript code such as the API and Action Cable 
+openc3-vue-common. openc3-js-common contains framework-agnostic JavaScript code such as the API and Action Cable
 adapters, and openc3-vue-common contains Vue components, plugins, and mixins.
 
 In previous versions of COSMOS, this code was in a package called openc3-tool-common, and you would
@@ -52,11 +52,11 @@ To see changes while developing one of these common packages, you must serve it
 
 1. Open a second terminal and repeat that process for openc3-js-common or openc3-vue-common
 
-    a. You may omit the final single SPA override step, as it will have no affect for the common package
+   a. You may omit the final single SPA override step, as it will have no affect for the common package
 
 1. If you are making style/layout changes, you must also open a third terminal and repeat the process for openc3-tool-base
 
-    a. **Do** complete the single SPA override step for openc3-tool-common
+   a. **Do** complete the single SPA override step for openc3-tool-base
 
 We are currently working on externalizing the common packages, which will greatly simplify this process (you'd only
 need to serve and override openc3-js-common or openc3-vue-common). This ability will come in a later release of COSMOS.

openc3-cosmos-init/plugins/packages/openc3-js-common/src/services/openc3Api.js

@@ -683,6 +683,10 @@ export default class OpenC3Api {
     return this.exec('set_setting', [name, data])
   }
 
+  update_news() {
+    return this.exec('update_news', [])
+  }
+
   // DEPRECATED for set_setting
   save_setting(name, data) {
     return this.exec('set_setting', [name, data])

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/tools/admin/tabs/SettingsTab.vue

@@ -26,6 +26,8 @@
     <v-divider />
     <time-zone-settings />
     <v-divider />
+    <news-feed-settings />
+    <v-divider />
     <classification-banner-settings />
     <v-divider />
     <subtitle-settings />
@@ -44,6 +46,7 @@ import DefaultConfigSettings from './settings/DefaultConfigSettings.vue'
 import AstroSettings from './settings/AstroSettings.vue'
 import ClassificationBannerSettings from './settings/ClassificationBannerSettings.vue'
 import TimeZoneSettings from './settings/TimeZoneSettings.vue'
+import NewsFeedSettings from './settings/NewsFeedSettings.vue'
 import SubtitleSettings from './settings/SubtitleSettings.vue'
 import SourceCodeSettings from './settings/SourceCodeSettings.vue'
 import RubyGemsSettings from './settings/RubyGemsSettings.vue'
@@ -56,6 +59,7 @@ export default {
     AstroSettings,
     ClassificationBannerSettings,
     TimeZoneSettings,
+    NewsFeedSettings,
     SubtitleSettings,
     SourceCodeSettings,
     RubyGemsSettings,

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/tools/admin/tabs/settings/NewsFeedSettings.vue

@@ -0,0 +1,78 @@
+<!--
+# Copyright 2025 OpenC3, Inc.
+# All Rights Reserved.
+#
+# This program is free software; you can modify and/or redistribute it
+# under the terms of the GNU Affero General Public License
+# as published by the Free Software Foundation; version 3 with
+# attribution addendums as found in the LICENSE.txt
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+
+# This file may also be used under the terms of a commercial license
+# if purchased from OpenC3, Inc.
+-->
+
+<template>
+  <v-card>
+    <v-card-title>News Feed Settings</v-card-title>
+    <v-alert v-model="errorLoading" type="error" closable density="compact">
+      Error loading previous configuration due to {{ errorText }}
+    </v-alert>
+    <v-alert v-model="errorSaving" type="error" closable density="compact">
+      Error saving due to {{ errorText }}
+    </v-alert>
+    <v-alert v-model="successSaving" type="success" closable density="compact">
+      Saved! (Refresh the page to see changes)
+    </v-alert>
+    <v-card-text class="pb-0">
+      <v-switch
+        label="Allow COSMOS backend to pull the news feed from the COSMOS external news site.
+        This is a low bandwidth poll which only happens every 12 hrs. To immediately update the news feed, click the 'Refresh' in the User Menu."
+        v-model="newsFeed"
+        color="primary"
+      />
+    </v-card-text>
+    <v-card-actions>
+      <v-btn
+        @click="save"
+        color="success"
+        variant="text"
+        data-test="save-news-feed"
+      >
+        Save
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+import Settings from './settings.js'
+
+const settingName = 'news_feed'
+export default {
+  mixins: [Settings],
+  data() {
+    return {
+      newsFeed: true,
+    }
+  },
+  created() {
+    this.loadSetting(settingName)
+  },
+  methods: {
+    save() {
+      this.saveSetting(settingName, this.newsFeed)
+      if (this.newsFeed) {
+        this.api.update_news()
+      }
+    },
+    parseSetting: function (response) {
+      this.newsFeed = response
+    },
+  },
+}
+</script>

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/tools/admin/tabs/settings/SuppressedSettings.vue

@@ -27,7 +27,7 @@
         <v-checkbox
           v-model="selectAllSuppressedWarnings"
           label="Select All Warnings"
-          desity="compact"
+          density="compact"
         />
         <v-checkbox
           v-for="warning in suppressedWarnings"

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/tools/admin/tabs/settings/settings.js

@@ -29,7 +29,7 @@ export default {
     }
   },
   methods: {
-    loadSetting: function (setting, variable, defaultValue) {
+    loadSetting: function (setting) {
       this.api
         .get_setting(setting)
         .then((response) => {

openc3-cosmos-init/plugins/packages/openc3-vue-common/src/tools/base/UserMenu.vue

@@ -37,6 +37,7 @@
           status="off"
           :label="name"
           :sublabel="roles()"
+          :notifications="unreadNews.length"
         ></rux-monitoring-icon>
       </template>
 
@@ -74,6 +75,39 @@
             COSMOS Enterprise Edition
           </div>
         </v-card-text>
+        <div v-if="newsFeed">
+          <v-row no-gutters class="news-header">
+            <v-col cols="auto" class="me-auto">COSMOS News</v-col>
+            <v-col cols="auto">
+              <v-btn
+                @click="refreshNews"
+                color="primary"
+                density="compact"
+                block
+              >
+                Refresh
+              </v-btn>
+            </v-col>
+          </v-row>
+          <v-list
+            lines="two"
+            width="420"
+            max-height="75vh"
+            class="overflow-y-auto"
+            data-test="news-list"
+          >
+            <template v-for="(news, index) in news" :key="`news-${index}`">
+              <hr />
+              <v-list-item class="pl-2">
+                <v-list-item-title>
+                  <span class="news-title">{{ news.title }}</span
+                  ><span class="news-date">{{ formatDate(news.date) }}</span>
+                </v-list-item-title>
+                <div v-html="news.body"></div>
+              </v-list-item>
+            </template>
+          </v-list>
+        </div>
       </v-card>
     </v-menu>
     <upgrade-to-enterprise-dialog
@@ -85,6 +119,7 @@
 
 <script>
 import { Api } from '@openc3/js-common/services'
+import { OpenC3Api } from '@openc3/js-common/services'
 import { UpgradeToEnterpriseDialog } from '@/components'
 
 export default {
@@ -100,19 +135,32 @@ export default {
   data: function () {
     let user = OpenC3Auth.user()
     return {
+      api: new OpenC3Api(),
       showUserMenu: false,
       authenticated: !!localStorage.openc3Token,
       name: user['name'],
       // preferred_username is returned by the token (see authorization.rb)
       username: user['preferred_username'],
       showUpgradeToEnterpriseDialog: false,
       activeUsers: ['None'],
+      newsFeed: false,
+      news: [],
     }
   },
+  computed: {
+    unreadNews: function () {
+      return this.news.filter((news) => !news.read)
+    },
+  },
   watch: {
-    // Whenever we show the user menu, refresh the list of active users
+    // Whenever we show the user menu, read the news and refresh the list of active users
     showUserMenu: function (newValue, oldValue) {
       if (newValue === true) {
+        this.news.forEach((news) => {
+          news.read = true
+        })
+        localStorage.newsRead = this.news.length
+
         if (this.name !== 'Anonymous') {
           Api.get('/openc3-api/users/active').then((response) => {
             this.activeUsers = response.data.filter(
@@ -126,7 +174,53 @@ export default {
       }
     },
   },
+  created: function () {
+    this.api
+      .get_setting('news_feed')
+      .then((response) => {
+        if (response) {
+          this.newsFeed = response
+          if (this.newsFeed) {
+            this.fetchNews()
+            // Every hour fetch news from the backend
+            // Note: the backend updates from news.openc3.org every 12 hours
+            setInterval(this.fetchNews, 60 * 60 * 1000)
+          }
+        }
+      })
+      .catch((error) => {
+        // Do nothing
+      })
+  },
   methods: {
+    refreshNews() {
+      // Force the backend to update the news feed
+      this.api.update_news().then(() => {
+        this.fetchNews()
+      })
+    },
+    formatDate(date) {
+      // Just show the YYYY-MM-DD part of the date
+      return date.split('T')[0]
+    },
+    fetchNews: function () {
+      Api.get('/openc3-api/news').then((response) => {
+        response.data.forEach((news) => {
+          news.read = false
+          this.news.some((oldNews) => oldNews.date === news.date)
+            ? null
+            : this.news.push(news)
+        })
+        this.news = this.news.sort(
+          (a, b) => Date.parse(b.date) - Date.parse(a.date),
+        )
+        if (localStorage.newsRead) {
+          for (let i = this.news.length - 1; i >= 0; i--) {
+            this.news[i].read = true
+          }
+        }
+      })
+    },
     logout: function () {
       OpenC3Auth.logout()
       Api.put(`/openc3-api/users/logout/${this.username}`)
@@ -152,6 +246,19 @@ export default {
 </script>
 
 <style scoped>
+.news-header {
+  padding: 10px;
+  background-color: var(--color-background-base-default);
+  text-align: center;
+}
+.news-title {
+  font-weight: bold;
+}
+.news-date {
+  font-size: 0.8rem;
+  color: grey;
+  float: right;
+}
 .link {
   cursor: pointer;
 }