Update panel proxying, frontend links and Readmes

serguun42 · Dec 10, 2023 · 7ca2718 · 7ca2718
1 parent 822d86b
commit 7ca2718
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 53 deletions.
diff --git a/backend/README.md b/backend/README.md
@@ -2,21 +2,21 @@
 
 ## BACKEND
 
-Uses Node.js as backend for API, nginx for static.
-Proxies logs from [app](https://github.com/serguun42/mss/tree/master/app) to [notifier](https://github.com/serguun42/mss/tree/master/notifier).
-
-### `nginx`
-Uses nginx as server for static and as reverse-proxy for API. See [nginxconfig.io](https://nginxconfig.io/) and [nginx.base.conf](./nginx.base.conf)
+Node.js for serving API of MSS.
 
 ## Commands
 
-1. Install all dependencies `npm i --only=prod`
-2. Run backend with PM2 `npm run production`
+1. Install all dependencies `npm ci --omit=dev`
+2. Run backend in production mode `npm run production`
+
+## Configs
+
+`backend.config.json` – Config file with ports, DB, logging, rate limiter
+
+## Tests
 
-## Some folders
+Check with Jest – `npm run test`, see tests themselves in [`tests` folder](./tests/).
 
-* `utils` – Common util scripts like DB handler, logger or parsers
-* `pages` – Backend side for some pages, e.g. `/` -> `index.js`, `/api` -> `api.js`
+## Monitoring
 
-## Some other files
-`backend.config.json` – Config file with ports, DB, logging, rate limiter 
+This backend serves for Prometheus monitoring at `/metrics`. Check global [Docker Compose file](../docker-compose.yml) and [`prometheus.yml`](../monitoring/prometheus.yml).
diff --git a/frontend/README.md b/frontend/README.md
@@ -2,14 +2,14 @@
 
 ## Frontend
 
-Built with Vue.js 2, 🚴🏻‍♀️
+Built with **Vue.js 2**.
 
 ## Commands
 
-1. Install all dependencies `npm i` (pass `--omit=dev` to install only necessary deps)
+1. Install all dependencies `npm ci` (pass `--omit=dev` to install only necessary deps)
 2. Build front from sources `npm run build`
 
 ## Config
 
--   `src/config/production.env` – donenv with variables (`src/config/local.env` for local dev mode)
--   `vue.config.js` – Configuration for Vue, Webpack and its plugins, building static meta files and creating environment
+- `src/config/production.env` – donenv with variables (`src/config/local.env` for local dev mode)
+- `vue.config.js` – Configuration for Vue, Webpack and its plugins, building static meta files and creating environment
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

diff --git a/frontend/src/components/SiteFooter.vue b/frontend/src/components/SiteFooter.vue
@@ -1,8 +1,13 @@
 <template>
 	<footer id="site-footer" :class="{ 'site-footer--for-map': $route.path === '/scheme' }">
 		<section class="site-footer__section" id="site-footer__section--logo">
-			<img id="site-footer__logo-img" src="/img/icons/round/round_512x512.png" draggable="false" oncontextmenu="return false"
-				alt="MSS">
+			<img
+				id="site-footer__logo-img"
+				src="/img/icons/round/round_512x512.png"
+				draggable="false"
+				oncontextmenu="return false"
+				alt="MSS"
+			/>
 			<div id="site-footer__logo-desc">
 				<div id="site-footer__logo-desc__title">MSS</div>
 				<div>
@@ -14,79 +19,109 @@
 
 		<section class="site-footer__section">
 			<div class="site-footer__section__item">
-				<span data-nosnippet class="material-icons material-icons-round">smart_toy</span> <a href="https://t.me/mirea_table_bot" target="_blank" rel="noopener noreferrer">Telegram-бот</a>
+				<span data-nosnippet class="material-icons material-icons-round">smart_toy</span>
+				<a href="https://t.me/mirea_table_bot" target="_blank" rel="noopener noreferrer">Telegram-бот</a>
 			</div>
 			<div class="site-footer__section__item default-no-select default-pointer" @click="exportToIcs">
-				<span data-nosnippet class="material-icons material-icons-round">calendar_month</span> <span>Экспортировать в .ics</span>
+				<span data-nosnippet class="material-icons material-icons-round">calendar_month</span>
+				<span>Экспортировать в .ics</span>
 			</div>
 			<div class="site-footer__section__item">
-				<span data-nosnippet class="material-icons material-icons-round">android</span> <router-link to="/apps">Мобильные приложения и другие сервисы</router-link>
+				<span data-nosnippet class="material-icons material-icons-round">android</span>
+				<router-link to="/apps">Мобильные приложения и другие сервисы</router-link>
 			</div>
 		</section>
 
 		<section class="site-footer__section">
 			<div class="site-footer__section__item">
-				<span data-nosnippet class="material-icons material-icons-round">api</span> <router-link to="/docs/api">Наше API</router-link>
+				<span data-nosnippet class="material-icons material-icons-round">api</span>
+				<router-link to="/docs/api">Наше API</router-link>
 			</div>
 			<div class="site-footer__section__item">
 				<svg class="octicon" height="32" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true">
-					<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
-				</svg> <a href="https://github.com/serguun42/mss" target="_blank" rel="noopener noreferrer">Github</a>
+					<path
+						fill-rule="evenodd"
+						d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+					></path>
+				</svg>
+				<a href="https://github.com/serguun42/mss" target="_blank" rel="noopener noreferrer">Github</a>
 			</div>
 			<div class="site-footer__section__item">
-				<span data-nosnippet class="material-icons material-icons-round">insights</span> <router-link to="/stats">Статистика</router-link>
+				<span data-nosnippet class="material-icons material-icons-round">insights</span>
+				<router-link to="/stats">Статистика</router-link>
 			</div>
 			<div class="site-footer__section__item">
-				<span data-nosnippet class="material-icons material-icons-round">settings</span> <router-link to="/stats">Панель конфигурации</router-link>
+				<span data-nosnippet class="material-icons material-icons-round">settings</span>
+				<a v-bind:href="panelUrl" target="_blank" rel="noopener noreferrer">Панель и мониторинг</a>
 			</div>
 		</section>
 
 		<section class="site-footer__section">
 			<div class="site-footer__section__item default-no-select default-pointer" @click="changeTheme">
-				<span data-nosnippet class="material-icons material-icons-round" ref="theme-icon" :key="`theme-icon-${$store.getters.theme.icon}`">{{ $store.getters.theme.icon }}</span> Выбрана <span ref="theme-name" :key="`theme-name-${$store.getters.theme.name}`">{{ $store.getters.theme.name }}</span>
+				<span
+					data-nosnippet
+					class="material-icons material-icons-round"
+					ref="theme-icon"
+					:key="`theme-icon-${$store.getters.theme.icon}`"
+					>{{ $store.getters.theme.icon }}</span
+				>
+				Выбрана
+				<span ref="theme-name" :key="`theme-name-${$store.getters.theme.name}`">{{
+					$store.getters.theme.name
+				}}</span>
 			</div>
 		</section>
 
 		<section class="site-footer__section">
 			<div class="site-footer__section__item default-no-select default-pointer" @click="clearGroup">
-				<span data-nosnippet class="material-icons material-icons-round">restart_alt</span> Сбросить группу
+				<span data-nosnippet class="material-icons material-icons-round">restart_alt</span>Сбросить группу
 			</div>
 			<div class="site-footer__section__item default-no-select default-pointer" @click="clearCache">
-				<span data-nosnippet class="material-icons material-icons-round">delete_outline</span> Очистить кэш
+				<span data-nosnippet class="material-icons material-icons-round">delete_outline</span>Очистить кэш
 			</div>
 			<div class="site-footer__section__item default-no-select">
 				<span data-nosnippet class="material-icons material-icons-round default-no-select">code</span>
-				<span>Версия {{ version }}</span><span v-if="runNumber"> (#{{ runNumber }})</span>
+				<span>Версия {{ version }}</span
+				><span v-if="runNumber"> (#{{ runNumber }})</span>
 			</div>
 		</section>
 
 		<section class="site-footer__section">
 			<div class="site-footer__section__item">
-				<span data-nosnippet class="material-icons material-icons-round">info</span> <router-link to="/about">О проекте</router-link>
+				<span data-nosnippet class="material-icons material-icons-round">info</span>
+				<router-link to="/about">О проекте</router-link>
 			</div>
 			<div class="site-footer__section__item">
-				<span data-nosnippet class="material-icons material-icons-round">contact_mail</span> <a href="https://github.com/serguun42/mss/issues" target="_blank" rel="noopener noreferrer">Баги и пожелания</a>
+				<span data-nosnippet class="material-icons material-icons-round">contact_mail</span>
+				<a href="https://github.com/serguun42/mss/issues" target="_blank" rel="noopener noreferrer"
+					>Баги и пожелания</a
+				>
 			</div>
 			<div class="site-footer__section__item">
-				<span data-nosnippet class="material-icons material-icons-round">policy</span> <router-link to="/privacy">Политика в отношении обработки персональных данных</router-link>
+				<span data-nosnippet class="material-icons material-icons-round">policy</span>
+				<router-link to="/privacy">Политика в отношении обработки персональных данных</router-link>
 			</div>
 			<div class="site-footer__section__item">
-				<span data-nosnippet class="material-icons material-icons-round">rule</span> <a href="https://github.com/serguun42/mss/blob/master/LICENSE" target="_blank" rel="noopener noreferrer">Лицензия</a>
+				<span data-nosnippet class="material-icons material-icons-round">rule</span>
+				<a href="https://github.com/serguun42/mss/blob/master/LICENSE" target="_blank" rel="noopener noreferrer"
+					>Лицензия</a
+				>
 			</div>
 		</section>
 	</footer>
 </template>
 
 <script>
-import store from "@/store"
+import store from "@/store";
 
 export default {
 	name: "site-footer",
 	data() {
 		return {
 			version: process.env.VUE_APP_VERSION,
 			runNumber: process.env.VUE_APP_RUN_NUMBER,
-		}
+			panelUrl: process.env.VUE_APP_PANEL_URL
+		};
 	},
 	methods: {
 		changeTheme() {
@@ -102,7 +137,7 @@ export default {
 			store.dispatch("clearCache", true);
 		}
 	}
-}
+};
 </script>
 
 <style scoped>
@@ -120,7 +155,7 @@ export default {
 	padding: 32px 32px calc(32px + 80px);
 
 	background-color: #333;
-	color: #E1E1E1;
+	color: #e1e1e1;
 
 	z-index: 6;
 }
@@ -171,7 +206,7 @@ export default {
 	padding: 0;
 	margin: 0 0 8px;
 	box-sizing: border-box;
-	font-family: 'Roboto', 'Noto Sans', Arial, Helvetica, sans-serif;
+	font-family: "Roboto", "Noto Sans", Arial, Helvetica, sans-serif;
 	font-weight: 400;
 	font-size: 16px;
 	line-height: 1.35em;
@@ -180,7 +215,7 @@ export default {
 .site-footer__section__item .material-icons {
 	margin-right: 8px;
 	vertical-align: -6px;
-	color: #E1E1E1;
+	color: #e1e1e1;
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
@@ -193,16 +228,16 @@ export default {
 
 	margin-right: 8px;
 	vertical-align: -6px;
-	color: #E1E1E1;
-	fill: #E1E1E1;
+	color: #e1e1e1;
+	fill: #e1e1e1;
 }
 
 .site-footer__section__item:last-of-type {
 	margin: 0;
 }
 
 .site-footer__section__item a {
-	color: #E1E1E1;
+	color: #e1e1e1;
 }
 
 #site-footer__section--logo {
@@ -219,7 +254,7 @@ export default {
 
 #site-footer__section--logo .material-icons {
 	vertical-align: -6px;
-	color: #E1E1E1;
+	color: #e1e1e1;
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
@@ -242,28 +277,30 @@ export default {
 	position: relative;
 	padding: 8px 16px;
 	box-sizing: border-box;
-	font-family: 'Roboto', 'Noto Sans', Arial, Helvetica, sans-serif;
+	font-family: "Roboto", "Noto Sans", Arial, Helvetica, sans-serif;
 	font-weight: 400;
 	font-size: 15px;
 	line-height: 1.35em;
 }
 
 #site-footer__logo-desc__title {
 	display: inline-block;
-	font-family: 'Product Sans', 'Roboto', 'Noto Sans', Arial, Helvetica, sans-serif;
+	font-family: "Product Sans", "Roboto", "Noto Sans", Arial, Helvetica, sans-serif;
 	font-size: 22px;
 	margin-bottom: 8px;
 }
 
-.site-footer__section__item__vk-icon, .site-footer__section__item__ok-icon {
+.site-footer__section__item__vk-icon,
+.site-footer__section__item__ok-icon {
 	display: inline-block;
 	position: relative;
 }
 
-.site-footer__section__item__vk-icon img, .site-footer__section__item__ok-icon img {
+.site-footer__section__item__vk-icon img,
+.site-footer__section__item__ok-icon img {
 	display: inline-block;
 	position: relative;
 	height: 16px;
 	vertical-align: -2px;
 }
-</style>
+</style>
diff --git a/frontend/src/config/production.env b/frontend/src/config/production.env
@@ -9,3 +9,4 @@ VUE_APP_OPENGRAPH_DESCRIPTION=mirea.xyz – Расписание МИРЭА дл
 VUE_APP_OPENGRAPH_IMAGE=/img/logo_wide.png
 VUE_APP_OPENGRAPH_SITE_NAME=mirea.xyz
 VUE_APP_CACHE_STORAGE_NAME=cache_static_and_dynamic_with_api
+VUE_APP_PANEL_URL=https://panel.mirea.xyz/params-panel/
diff --git a/healthcheck/README.md b/healthcheck/README.md
@@ -0,0 +1,9 @@
+# MIREA Schedule System
+
+## Healthcheck
+
+Standalone healthcheck for MSS considered to be deployed on Cloud serverless container.
+
+### Config
+
+Check file [healthcheck.config.json](./healthcheck.config.json) for target server.
diff --git a/monitoring/prometheus.yml b/monitoring/prometheus.yml
@@ -2,6 +2,6 @@ global:
   scrape_interval: 5s
 
 scrape_configs:
-  - job_name: "backend-server"
+  - job_name: "mss-backend"
     static_configs:
-      - targets: ["172.25.240.1:80"]
+      - targets: ["mss-backend:80"]
diff --git a/panel/panel.js b/panel/panel.js
@@ -101,14 +101,24 @@ createServer((req, res) => {
         return;
       }
 
+      const sendingHeaders = req.headers;
+      sendingHeaders.host = "grafana";
+      delete sendingHeaders["X-Real-IP"];
+      delete sendingHeaders["Forwarded"];
+      delete sendingHeaders["X-Forwarded-For"];
+      delete sendingHeaders["X-Forwarded-Proto"];
+      delete sendingHeaders["X-Forwarded-Host"];
+      delete sendingHeaders["X-Forwarded-Port"];
+
       fetch(new URL(requestedURL, PANEL_CONFIG.GRAFANA_ORIGIN).href, {
         method,
-        headers: req.headers,
+        headers: sendingHeaders,
         body: method === "GET" ? undefined : req
       })
         .then((grafanaResponse) => {
           res.statusCode = grafanaResponse.status;
           res.statusMessage = grafanaResponse.statusText;
+
           for (const [name, value] of grafanaResponse.headers) res.setHeader(name, value);
 
           grafanaResponse.body.pipe(res);