chore: Update ProbeStatusElement component to use connectionStatus field

App/FeatureSet/Docs/Content/probe/custom-probe.md

@@ -11,7 +11,6 @@ To run a probe, please make sure you have docker installed. You can run custom p
 
 ```
 docker run --name oneuptime-probe --network host -e PROBE_KEY=<probe-key> -e PROBE_ID=<probe-id> -e ONEUPTIME_URL=https://oneuptime.com -d oneuptime/probe:release
-
 ```
 
 If you are self hosting OneUptime, you can change `INGESTOR_URL` to your custom self hosted instance. 

App/FeatureSet/Workers/Jobs/Probe/UpdateConnectionStatus.ts

@@ -58,6 +58,10 @@ RunCron(
           connectionStatus = ProbeConnectionStatus.Connected;
         }
 
+        if (!probe.lastAlive) {
+          connectionStatus = ProbeConnectionStatus.Disconnected;
+        }
+
         let shouldNotifyProbeOwner: boolean = false;
         let shouldUpdateConnectionStatus: boolean = false;
 

CommonServer/Services/ProbeService.ts

@@ -35,7 +35,7 @@ export class Service extends DatabaseService<Model> {
     createBy: CreateBy<Model>,
   ): Promise<OnCreate<Model>> {
     if (!createBy.data.key) {
-      createBy.data.key = ObjectID.generate().toString();
+      createBy.data.key = ObjectID.generate();
     }
 
     if (!createBy.data.probeVersion) {

CommonUI/src/Components/Detail/Detail.tsx

@@ -149,7 +149,14 @@ const Detail: DetailFunction = <T extends GenericObject>(
     }
 
     if (field.fieldType === FieldType.Date) {
-      data = OneUptimeDate.getDateAsLocalFormattedString(data as string, true);
+      if (data) {
+        data = OneUptimeDate.getDateAsLocalFormattedString(
+          data as string,
+          true,
+        );
+      } else {
+        data = field.placeholder || "-";
+      }
     }
 
     if (field.fieldType === FieldType.Boolean) {
@@ -161,7 +168,14 @@ const Detail: DetailFunction = <T extends GenericObject>(
     }
 
     if (field.fieldType === FieldType.DateTime) {
-      data = OneUptimeDate.getDateAsLocalFormattedString(data as string, false);
+      if (data) {
+        data = OneUptimeDate.getDateAsLocalFormattedString(
+          data as string,
+          false,
+        );
+      } else {
+        data = field.placeholder || "-";
+      }
     }
 
     if (data && field.fieldType === FieldType.Color) {

Dashboard/src/Components/Probe/CustomProbeDocumentation.tsx

@@ -0,0 +1,37 @@
+import ObjectID from "Common/Types/ObjectID";
+import Card from "CommonUI/src/Components/Card/Card";
+import CodeBlock from "CommonUI/src/Components/CodeBlock/CodeBlock";
+import { HOST, HTTP_PROTOCOL } from "CommonUI/src/Config";
+import React, { FunctionComponent, ReactElement } from "react";
+
+export interface ComponentProps {
+  probeKey: ObjectID;
+  probeId: ObjectID;
+}
+
+const CustomProbeDocumentation: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const host: string = `${HTTP_PROTOCOL}${HOST}`;
+
+  return (
+    <>
+      <Card
+        title={`Set up your Server Monitor (Linux/Mac)`}
+        description={
+          <div className="space-y-2 w-full mt-5">
+            <CodeBlock
+              language="bash"
+              code={`
+# Run with Docker
+docker run --name oneuptime-probe --network host -e PROBE_KEY=${props.probeKey.toString()} -e PROBE_ID=${props.probeId.toString()} -e ONEUPTIME_URL=${host.toString()} -d oneuptime/probe:release
+`}
+            />
+          </div>
+        }
+      />
+    </>
+  );
+};
+
+export default CustomProbeDocumentation;

Dashboard/src/Pages/Settings/ProbeView.tsx

@@ -19,11 +19,12 @@ import Probe from "Model/Models/Probe";
 import ProbeOwnerTeam from "Model/Models/ProbeOwnerTeam";
 import ProbeOwnerUser from "Model/Models/ProbeOwnerUser";
 import User from "Model/Models/User";
-import React, { Fragment, FunctionComponent, ReactElement } from "react";
+import React, { Fragment, FunctionComponent, ReactElement, useState } from "react";
 import TeamElement from "../../Components/Team/Team";
 import Team from "Model/Models/Team";
 import ResetObjectID from "CommonUI/src/Components/ResetObjectID/ResetObjectID";
 import ProbeStatusElement from "../../Components/Probe/ProbeStatus";
+import CustomProbeDocumentation from "../../Components/Probe/CustomProbeDocumentation";
 
 export enum PermissionType {
   AllowPermissions = "AllowPermissions",
@@ -35,6 +36,8 @@ const TeamView: FunctionComponent<PageComponentProps> = (
 ): ReactElement => {
   const modelId: ObjectID = Navigation.getLastParamAsObjectID();
 
+  const [probe, setProbe] = useState<Probe | null>(null);
+
   return (
     <Fragment>
       {/* API Key View  */}
@@ -120,6 +123,9 @@ const TeamView: FunctionComponent<PageComponentProps> = (
           },
         ]}
         modelDetailProps={{
+          onItemLoaded: (item: Probe) => {
+            setProbe(item);
+          },
           modelType: Probe,
           id: "model-detail-team",
           fields: [
@@ -200,6 +206,8 @@ const TeamView: FunctionComponent<PageComponentProps> = (
         }}
       />
 
+      {probe && <CustomProbeDocumentation probeKey={probe.key!} probeId={probe.id!} />}
+
       <ModelTable<ProbeOwnerTeam>
         modelType={ProbeOwnerTeam}
         id="table-monitor-owner-team"

Ingestor/API/Register.ts

@@ -10,7 +10,7 @@ import Express, {
   NextFunction,
 } from "CommonServer/Utils/Express";
 import Response from "CommonServer/Utils/Response";
-import Probe from "Model/Models/Probe";
+import Probe, { ProbeConnectionStatus } from "Model/Models/Probe";
 
 const router: ExpressRouter = Express.getRouter();
 
@@ -56,6 +56,7 @@ router.post(
             name: data["probeName"] as string,
             description: data["probeDescription"] as string,
             lastAlive: OneUptimeDate.getCurrentDate(),
+            connectionStatus: ProbeConnectionStatus.Connected,
           },
           props: {
             isRoot: true,
@@ -74,6 +75,7 @@ router.post(
       newProbe.name = data["probeName"] as string;
       newProbe.description = data["probeDescription"] as string;
       newProbe.lastAlive = OneUptimeDate.getCurrentDate();
+      newProbe.connectionStatus = ProbeConnectionStatus.Connected;
       newProbe.shouldAutoEnableProbeOnNewMonitors = true;
 
       newProbe = await ProbeService.create({

Model/Models/Probe.ts

@@ -98,14 +98,15 @@ export default class Probe extends BaseModel {
   @TableColumn({
     required: true,
     unique: true,
-    type: TableColumnType.ShortText,
+    type: TableColumnType.ObjectID,
   })
   @Column({
-    type: ColumnType.ShortText,
+    type: ColumnType.ObjectID,
     nullable: false,
     unique: true,
+    transformer: ObjectID.getDatabaseTransformer(),
   })
-  public key?: string = undefined;
+  public key?: ObjectID = undefined;
 
   @ColumnAccessControl({
     create: [