implement some stats recording. clean up Tab comp

core/src/state.rs

@@ -10,8 +10,8 @@ use futures_util::future::join_all;
 use mungos::doc;
 use periphery::PeripheryClient;
 use types::{
-    BuildActionState, CoreConfig, DeploymentActionState, ServerActionState, SystemStatsQuery,
-    SystemStatsRecord,
+    BuildActionState, CoreConfig, DeploymentActionState, Server, ServerActionState,
+    SystemStatsQuery, SystemStatsRecord,
 };
 
 use crate::ws::update::UpdateWsChannel;
@@ -81,10 +81,13 @@ impl State {
             });
             for (server, res) in join_all(futures).await {
                 if let Err(e) = res {
+                    println!("server unreachable: {e:?}");
                     if let Some(slack) = &self.slack {
-                        let res = slack
-                            .send_message_with_header(format!(""), format!(""))
-                            .await;
+                        let (header, info) = generate_unreachable_message(&server);
+                        let res = slack.send_message_with_header(&header, info.clone()).await;
+                        if let Err(e) = res {
+                            eprintln!("failed to send message to slack: {e} | header: {header} | info: {info:?}")
+                        }
                     }
                     continue;
                 }
@@ -94,7 +97,30 @@ impl State {
                     .stats
                     .create_one(SystemStatsRecord::from_stats(server.id, ts, stats))
                     .await;
+                if let Err(e) = res {
+                    eprintln!("failed to insert stats into mongo | {e}");
+                }
             }
         }
     }
 }
+
+fn generate_unreachable_message(server: &Server) -> (String, Option<String>) {
+    let region = match &server.region {
+        Some(region) => format!(" ({region})"),
+        None => String::new(),
+    };
+    let header = format!("WARNING 🚨 | {}{region} is unreachable ❌", server.name);
+    let to_notify = server
+        .to_notify
+        .iter()
+        .map(|u| format!("<@{u}>"))
+        .collect::<Vec<_>>()
+        .join(" ");
+    let info = if to_notify.len() > 0 {
+        Some(to_notify)
+    } else {
+        None
+    };
+    (header, info)
+}

frontend/src/components/shared/tabs/Tabs.tsx

@@ -2,7 +2,6 @@ import {
   Accessor,
   Component,
   createEffect,
-  createMemo,
   createSignal,
   For,
   JSX,
@@ -44,44 +43,51 @@ export const ControlledTabs: Component<{
   tabs: Tab[];
   selected: Accessor<string>;
   set: LocalStorageSetter<string>;
-  tabsGap?: string;
-  tabStyle?: JSX.CSSProperties;
   containerClass?: string;
   containerStyle?: JSX.CSSProperties;
+  tabTitlesClass?: string;
+  tabTitlesStyle?: JSX.CSSProperties;
+  tabTitleGap?: string;
+  tabTitleClass?: string;
+  tabTitleStyle?: JSX.CSSProperties;
+  tabContentClass?: string;
 }> = (p) => {
   const current = () => p.tabs.findIndex((tab) => tab.title === p.selected());
-  const getClassName = (title: string) =>
-    p.selected() === title ? combineClasses(s.Tab, s.Active) : s.Tab;
+  const getTitleClassName = (title: string) =>
+    p.selected() === title
+      ? combineClasses(s.TabTitle, s.Active, p.tabTitleClass)
+      : combineClasses(s.TabTitle, p.tabTitleClass);
   return (
     <div
-      class={combineClasses(p.containerClass, s.Tabs)}
+      class={combineClasses(s.Tabs, p.containerClass)}
       style={p.containerStyle}
     >
       <Flex
-        gap={p.tabsGap || "0rem"}
+        class={p.tabTitlesClass}
+        style={p.tabTitlesStyle}
+        gap={p.tabTitleGap || "0rem"}
         alignItems="center"
         justifyContent="space-evenly"
       >
         <For each={p.tabs}>
           {(tab) => (
             <button
-              class={getClassName(tab.title)}
-              style={p.tabStyle}
+              class={getTitleClassName(tab.title)}
+              style={p.tabTitleStyle}
               onClick={() => p.set(tab.title)}
             >
-              {tab.titleElement || tab.title}
+              {tab.titleElement ? tab.titleElement() : tab.title}
             </button>
           )}
         </For>
       </Flex>
       <div style={{ overflow: "hidden" }}>
         <Flex
+          class={combineClasses(s.TabContent, p.tabContentClass)}
           gap="0rem"
           style={{
-            position: "relative",
             width: `${p.tabs.length * 100}%`,
             left: `-${current() * 100}%`,
-            transition: "left 350ms ease",
           }}
         >
           <For each={p.tabs}>
@@ -99,7 +105,6 @@ export const ControlledTabs: Component<{
           </For>
         </Flex>
       </div>
-      {/* {tabs()[current()].element} */}
     </div>
   );
 };

frontend/src/components/shared/tabs/tabs.module.scss

@@ -6,7 +6,7 @@
   gap: 1rem;
 }
 
-.Tab {
+.TabTitle {
   display: grid;
   place-items: center;
   padding: 0.25rem 0.5rem;
@@ -21,4 +21,9 @@
 .Active {
   border-color: rgba(c.$lightgrey, 0.9);
   background-color: rgba(c.$lightgrey, 0.4);
+}
+
+.TabContent {
+  position: relative;
+  transition: left 350ms ease;
 }

tests/src/main.rs

@@ -22,7 +22,7 @@ async fn main() -> anyhow::Result<()> {
     // let server_stats = get_server_stats(&monitor).await?;
     // println!("server stats:\n{server_stats:#?}\n");
 
-    subscribe_to_server_stats(&monitor).await?;
+    // subscribe_to_server_stats(&monitor).await?;
 
     // let (update, container) = deploy_mongo(&monitor).await?;
     // println!(
@@ -30,8 +30,8 @@ async fn main() -> anyhow::Result<()> {
     //     container.container
     // );
 
-    // let update = test_build(&monitor).await?;
-    // println!("build update:\n{update:#?}");
+    let update = test_build(&monitor).await?;
+    println!("build update:\n{update:#?}");
 
     // test_updates(&monitor).await.unwrap();