feat: progress grid

Author: starpit

plugins/plugin-client-default/notebooks/dashboard.md

@@ -11,6 +11,10 @@ layout:
     3:
         position: default
         maximized: true
+    4:
+        position: default
+        maximized: true
+        inverseColors: true
 ---
 
 --8<-- "./dashboard-summary.md"
@@ -62,3 +66,14 @@ layout:
     ---
     chart all "${LOGDIR}"
     ```
+
+---
+
+=== "Events"
+    ```shell
+    ---
+    execute: now
+    outputOnly: true
+    ---
+    chart progress "${LOGDIR}"
+    ```

plugins/plugin-codeflare/src/components/Grid.tsx

@@ -0,0 +1,62 @@
+/*
+ * Copyright 2022 The Kubernetes Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { Tooltip } from "@kui-shell/plugin-client-common"
+
+import Event from "../controller/events/Event"
+
+import "@kui-shell/plugin-client-common/web/scss/components/Table/_index.scss"
+import "@kui-shell/plugin-client-common/web/scss/components/Table/Grid/_index.scss"
+import "../../web/scss/components/Dashboard/Grid.scss"
+
+interface Props {
+  events: Event<string, unknown>[]
+}
+
+export default class Grid extends React.PureComponent<Props> {
+  private tooltipContent(event: Event<string, unknown>) {
+    const title = event.name
+    const subtitle = event.subtitle || event.type
+    const status = event.state
+    const showMoreDetail = event.message || " "
+
+    return `### ${title}
+#### ${subtitle}
+
+${status ? "Status: " + status : ""}
+
+\`${showMoreDetail}\``
+  }
+
+  private readonly cell = (event: Event<string, unknown>, idx: number) => {
+    return (
+      <Tooltip key={idx} markdown={this.tooltipContent(event)}>
+        <span className="kui--grid-cell" data-tag="badge" data-type={event.type} data-state={event.state}>
+          <span data-tag="badge-circle"></span>
+        </span>
+      </Tooltip>
+    )
+  }
+
+  public render() {
+    return (
+      <div className="kui--data-table-wrapper kui--data-table-as-grid">
+        <div className="kui--table-like-wrapper kui--data-table-as-grid">{this.props.events.map(this.cell)}</div>
+      </div>
+    )
+  }
+}

plugins/plugin-codeflare/src/controller/events/Event.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright 2022 The Kubernetes Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export type State = "InProgress" | "Done" | "Error"
+type Event<T extends string, Detail> = Detail & {
+  name: string
+  subtitle?: string
+  message: string
+  type: T
+  state: State
+  timestamp: number
+  hidden?: boolean
+}
+
+export default Event

plugins/plugin-codeflare/src/controller/events/Events.tsx

@@ -0,0 +1,49 @@
+/*
+ * Copyright 2022 The Kubernetes Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { join } from "path"
+import stripAnsi from "strip-ansi"
+import { Arguments } from "@kui-shell/core"
+
+import kubeEvents from "./kube"
+import torchEvents from "./torch"
+
+import { expand } from "../../lib/util"
+import Grid from "../../components/Grid"
+
+async function eventsUI(filepath: string, REPL: Arguments["REPL"]) {
+  const [kube, logs] = await Promise.all([
+    REPL.qexec<string>(`vfs fslice ${join(expand(filepath), "events/kubernetes.txt")} 0`).then(stripAnsi),
+    REPL.qexec<string>(`vfs fslice ${join(expand(filepath), "logs/job.txt")} 0`).then(stripAnsi),
+  ])
+
+  const events = [...kubeEvents(kube), ...torchEvents(logs)]
+    .filter((_) => !_.hidden)
+    .sort((a, b) => a.timestamp - b.timestamp)
+  return <Grid events={events} />
+}
+
+export default async function eventsCmd(args: Arguments) {
+  const filepath = args.argvNoOptions[2]
+  if (!filepath) {
+    throw new Error(`Usage chart progress ${filepath}`)
+  }
+
+  return {
+    react: await eventsUI(expand(filepath), args.REPL),
+  }
+}

plugins/plugin-codeflare/src/controller/events/index.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2022 The Kubernetes Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Registrar } from "@kui-shell/core"
+
+/** Register Kui Commands for rendering dashboard event UIs */
+export default function registerEventCommands(registrar: Registrar) {
+  registrar.listen("/chart/progress", (args) => import("./Events").then((_) => _.default(args)), { needsUI: true })
+}

plugins/plugin-codeflare/src/controller/events/kube.ts

@@ -0,0 +1,63 @@
+/*
+ * Copyright 2022 The Kubernetes Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Event from "./Event"
+
+type EventType = "Pulling" | "Pulled"
+type KubeEvent = Event<EventType, { node: string }>
+
+function findPrevious(M: KubeEvent[], node: KubeEvent["node"], type: EventType) {
+  for (let idx = M.length - 1; idx >= 0; idx--) {
+    const evt = M[idx]
+    if (evt.type === type && evt.node === node) {
+      return evt
+    }
+  }
+}
+
+function collateEvent(M: KubeEvent[], line: string) {
+  const pullMatch = line.match(/(Pulling|Pulled)\s+(\S+)\s+(.+)$/)
+  if (pullMatch) {
+    const type = pullMatch[1] as EventType
+    const node = pullMatch[2]
+    const message = pullMatch[3]
+    const state = type === "Pulling" ? "InProgress" : "Done"
+
+    if (type === "Pulled") {
+      const pulling = findPrevious(M, node, "Pulling")
+      if (pulling) {
+        pulling.state = "Done"
+      }
+    } else {
+      M.push({
+        name: "Pulling base image",
+        subtitle: node,
+        node,
+        type,
+        message,
+        state,
+        timestamp: -1,
+      })
+    }
+  }
+
+  return M
+}
+
+/** @return lifecycle events from Kubernetes */
+export default function kubeEvents(kubeEvents: string): KubeEvent[] {
+  return kubeEvents.split(/\n/).reduce(collateEvent, [] as KubeEvent[])
+}

plugins/plugin-codeflare/src/controller/events/torch.ts

@@ -0,0 +1,104 @@
+/*
+ * Copyright 2022 The Kubernetes Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Event from "./Event"
+
+type EventType = "Epoch" | "Iteration" | "Marker"
+type Detail = { epoch: number; step: number; nSteps: number; ip: string }
+type TorchEvent = Event<EventType, Detail>
+
+function findPrevious(M: TorchEvent[], ip: TorchEvent["ip"], type: EventType) {
+  for (let idx = M.length - 1; idx >= 0; idx--) {
+    const evt = M[idx]
+    if (evt.type === type && evt.ip === ip) {
+      return evt
+    }
+  }
+}
+
+function findEpoch(M: TorchEvent[], ip: TorchEvent["ip"]) {
+  const evt = findPrevious(M, ip, "Epoch")
+  return evt ? evt.step : -1
+}
+
+function collateEvent(M: TorchEvent[], line: string) {
+  const startMatch = line.match(/ip=([\d.]+)\)\s+(\d+\/\d+\/\d+\s+\d+:\d+:\d+)\s+.+\*\*\*\*\* Running training/)
+  if (startMatch) {
+    const ip = startMatch[1]
+    const type = "Marker"
+    const name = type
+    const message = type
+    const hidden = true
+    const timestamp = new Date(startMatch[2]).getTime()
+    const epoch = -1
+    const step = -1
+    const nSteps = -1
+    const state = "InProgress"
+    M.push({ ip, name, message, state, type, hidden, timestamp, epoch, step, nSteps })
+    return M
+  }
+
+  const match = line.match(/ip=([\d.]+)\)\s+(Epoch|Iteration):\s+(\d+)%\|[^|]+\|\s(\d+)\/(\d+)/)
+  if (match) {
+    const ip = match[1]
+    const type = match[2] as EventType
+    // const percentage = parseInt(match[3], 10)
+    const step = parseInt(match[4], 10)
+    const nSteps = parseInt(match[5], 10)
+
+    const epoch = type === "Epoch" ? step : findEpoch(M, ip)
+    const timestampMarker = findPrevious(M, ip, "Marker")
+
+    const event = {
+      name: `Torch Training on ${ip}`,
+      message: `Epoch ${epoch}${type !== "Epoch" ? ` - ${type} ${step}` : ""} of ${nSteps}`,
+      ip,
+      type,
+      step,
+      nSteps,
+      epoch,
+      timestamp: timestampMarker ? timestampMarker.timestamp : Date.now(),
+      state: "InProgress" as const,
+    }
+
+    // find previous by ip and mark it Done
+    const prev = findPrevious(M, ip, type)
+    if (prev) {
+      prev.state = "Done"
+
+      if (type === "Epoch" && prev.step === step) {
+        // strange, torch seems to repeat the e.g. Epoch 6/6 event...
+        return M
+      }
+    }
+
+    M.push(event)
+  }
+
+  return M
+}
+
+function sortFn(a: TorchEvent, b: TorchEvent) {
+  return a.ip.localeCompare(b.ip) || a.epoch - b.epoch || a.step - b.step || a.type.localeCompare(b.type)
+}
+
+/** @return lifecycle events (Epoch, Iteration) for Torch training */
+export default function torchEvents(jobLogs: string): TorchEvent[] {
+  return jobLogs
+    .split(/\n/)
+    .reduce(collateEvent, [] as TorchEvent[])
+    .sort(sortFn)
+}