finish up live streaming for cert manager applet

api/server/handlers/release/get.go

@@ -174,7 +174,7 @@ tabs:
               ) end
             )
           ),
-          timestamp: .status.conditions[0].lastTransitionTime | fromdate | strftime("%Y-%m-%d"),
+          timestamp: .status.conditions[0].lastTransitionTime,
           message: [.status.conditions[].message] | unique | join(","),
           data: {}
         }`

dashboard/src/components/ExpandableResource.tsx

@@ -48,12 +48,20 @@ const ExpandableResource: React.FC<Props> = (props) => {
       },
       {}
     )
-      .then((res) => {
-        console.log("RES IS", res);
-      })
+      .then((res) => {})
       .catch((err) => console.log(err));
   };
 
+  const readableDate = (s: string) => {
+    const ts = new Date(s);
+    const date = ts.toLocaleDateString();
+    const time = ts.toLocaleTimeString([], {
+      hour: "numeric",
+      minute: "2-digit",
+    });
+    return `${time} on ${date}`;
+  };
+
   return (
     <ResourceTab
       label={resource.label}
@@ -66,7 +74,7 @@ const ExpandableResource: React.FC<Props> = (props) => {
             <Status>
               <Key>Status:</Key> {resource.status}
             </Status>
-            <Timestamp>Updated {resource.timestamp}</Timestamp>
+            <Timestamp>Updated {readableDate(resource.timestamp)}</Timestamp>
           </StatusHeader>
           {resource.message}
         </StatusSection>

dashboard/src/components/porter-form/field-components/ResourceList.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useContext } from "react";
+import React, { useEffect, useContext, useState } from "react";
 import { ResourceListField } from "../types";
 import { Context } from "shared/Context";
 import { useWebsockets } from "shared/hooks/useWebsockets";
@@ -9,6 +9,7 @@ import styled from "styled-components";
 const ResourceList: React.FC<ResourceListField> = (props) => {
   const { currentCluster, currentProject } = useContext(Context);
   const { formState } = useContext(PorterFormContext);
+  const [resourceList, updateResourceList] = useState<any[]>(props.value);
 
   const {
     newWebsocket,
@@ -17,6 +18,14 @@ const ResourceList: React.FC<ResourceListField> = (props) => {
     closeWebsocket,
   } = useWebsockets();
 
+  const sortAndUpdateResources = (list: any[]) => {
+    list.sort((a, b) => {
+      return b.timestamp.localeCompare(a.timestamp);
+    });
+
+    updateResourceList(list);
+  };
+
   useEffect(() => {
     let { group, version, resource } = props.context.config;
     let apiEndpoint = `/api/projects/${currentProject.id}/clusters/${currentCluster.id}/namespaces/${formState.variables.namespace}/releases/${formState.variables.currentChart.name}/0/form_stream?`;
@@ -24,15 +33,50 @@ const ResourceList: React.FC<ResourceListField> = (props) => {
 
     const wsConfig = {
       onmessage(evt: MessageEvent) {
-        console.log("EVENT IS", evt);
+        let { data, kind } = JSON.parse(evt.data);
+
+        // parse for name and label, which uniquely identify a resource
+        for (let [key] of Object.entries(data)) {
+          // check the name and label in the value
+          let { name, label } = data[key][0];
+
+          // attempt to find a corresponding name and label in the current array
+          let foundMatch = false;
+
+          resourceList.forEach((resource, index) => {
+            if (resource.name == name && resource.label == label) {
+              foundMatch = true;
+
+              switch (kind) {
+                case "update":
+                case "create":
+                  // replace this resource in the list
+                  resourceList[index] = data[key][0];
+                  break;
+                case "delete":
+                  // remove this resource from the list
+                  resourceList.splice(index, 1);
+                  break;
+                default:
+              }
+            }
+          });
+
+          if (!foundMatch && kind != "delete") {
+            // add this resource to the list
+            resourceList.push(data[key][0]);
+          }
+        }
+
+        sortAndUpdateResources([...resourceList]);
       },
       onerror() {
-        closeWebsocket("testing");
+        closeWebsocket("stream");
       },
     };
 
-    newWebsocket("testing", apiEndpoint, wsConfig);
-    openWebsocket("testing");
+    newWebsocket("stream", apiEndpoint, wsConfig);
+    openWebsocket("stream");
 
     return () => {
       closeAllWebsockets();
@@ -41,14 +85,14 @@ const ResourceList: React.FC<ResourceListField> = (props) => {
 
   return (
     <ResourceListWrapper>
-      {props.value?.map((resource: any, i: number) => {
+      {resourceList?.map((resource: any, i: number) => {
         if (resource.data) {
           return (
             <ExpandableResource
               key={i}
               button={props?.settings?.options["resource-button"]}
               resource={resource}
-              isLast={i === props.value.length - 1}
+              isLast={i === resourceList.length - 1}
               roundAllCorners={true}
             />
           );