Made bars show in grey before service start date

src/components/AppRoot.ts

@@ -142,6 +142,7 @@ export class AppRoot extends Component {
           return new Metric(m.id, m.name.default, m.suffix, data);
         }),
       ),
+      c.startDate === null ? null : new Date(c.startDate),
       c.showUptime,
     );
   }

src/components/ServiceRow.ts

@@ -170,6 +170,11 @@ export class ServiceRow extends Component {
     const now = new Date();
     const bars = Array.from({ length: 90 }, (_, i) => {
       const day = new Date(now.getTime() - (89 - i) * 86400000);
+      if ((this.service.started?.getTime() ?? 0) > day.getTime()) {
+        return html`
+          <div class="bg-white/10"></div>
+        `;
+      }
       const notices = this.noticesForDay(day);
       if (notices.length === 0) {
         return html`

src/models/Service.ts

@@ -6,19 +6,22 @@ export class Service {
   public readonly name: string;
   public readonly status: ServiceStatus;
   public readonly metrics: Metric[];
+  public readonly started: Date | null;
   public readonly showUptime: boolean;
 
   public constructor(
     id: string,
     name: string,
     status: ServiceStatus,
     metrics: Metric[],
+    started: Date | null,
     showUptime: boolean,
   ) {
     this.id = id;
     this.name = name;
     this.status = status;
     this.metrics = metrics;
+    this.started = started;
     this.showUptime = showUptime;
   }
 

src/models/ServiceGroup.ts

@@ -12,7 +12,16 @@ export class ServiceGroup extends Service {
     showUptime: boolean,
     isCollapsed: boolean,
   ) {
-    super(id, name, Services.mostSevere(children).status, [], showUptime);
+    super(
+      id,
+      name,
+      Services.mostSevere(children).status,
+      [],
+      Array.from(children).sort((a, b) =>
+        (a.started?.getTime() ?? 0) - (b.started?.getTime() ?? 0)
+      )[0]?.started,
+      showUptime,
+    );
     this.children = children;
     this.isCollapsed = isCollapsed;
   }