[DRAFT] Initial UI

.run/MaestroApp.run.xml

@@ -0,0 +1,10 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="MaestroApp" type="SpringBootApplicationConfigurationType" factoryName="Spring Boot" nameIsGenerated="true">
+    <module name="maestro.maestro-server.main" />
+    <option name="SPRING_BOOT_MAIN_CLASS" value="com.netflix.maestro.server.MaestroApp" />
+    <option name="VM_PARAMETERS" value="-Djava.security.manager=allow" />
+    <method v="2">
+      <option name="Make" enabled="true" />
+    </method>
+  </configuration>
+</component>

maestro-server/src/main/resources/static/css/styles.css

@@ -0,0 +1,200 @@
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
+    margin: 20px;
+    background-color: #f5f5f5;
+}
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+table {
+    border-collapse: collapse;
+    width: 100%;
+    margin-top: 20px;
+    background-color: white;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+th, td {
+    border: 1px solid #eee;
+    padding: 12px;
+    text-align: left;
+}
+th {
+    background-color: #f8f9fa;
+    font-weight: 600;
+}
+tr:hover {
+    background-color: #f8f9fa;
+}
+.status-succeeded {
+    color: #2e7d32;
+    font-weight: 500;
+}
+.status-created {
+    color: #1976d2;
+    font-weight: 500;
+}
+.status-failed {
+    color: #d32f2f;
+    font-weight: 500;
+}
+.status-in_progress {
+    color: #ff9800;
+    font-weight: 500;
+}
+.status-stopped {
+    color: #9e9e9e;
+    font-weight: 500;
+}
+.status-timed_out {
+    color: #ff5722;
+    font-weight: 500;
+}
+button {
+    padding: 12px 24px;
+    margin: 10px 0;
+    cursor: pointer;
+    background-color: #1976d2;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    font-size: 14px;
+    transition: background-color 0.2s;
+}
+button:hover {
+    background-color: #1565c0;
+}
+.errors-container {
+    margin-bottom: 20px;
+}
+.error-message {
+    background-color: #ffebee;
+    color: #c62828;
+    padding: 12px;
+    margin: 8px 0;
+    border: 1px solid #ef9a9a;
+    border-radius: 4px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.error-dismiss {
+    background: none;
+    border: none;
+    color: #c62828;
+    padding: 4px 8px;
+    cursor: pointer;
+    font-size: 18px;
+    margin: 0;
+}
+.error-dismiss:hover {
+    background-color: rgba(198, 40, 40, 0.1);
+    border-radius: 4px;
+}
+.instance-row {
+    cursor: pointer;
+}
+.instance-details {
+    display: none;
+    padding: 20px;
+    background-color: #f9f9f9;
+    border-radius: 4px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+.run-selector {
+    margin-bottom: 15px;
+}
+.dag-container {
+    width: 100%;
+    height: 400px;
+    border: 1px solid #ddd;
+    margin-top: 15px;
+    position: relative;
+    overflow: auto;
+}
+.step-node {
+    position: absolute;
+    width: 150px;
+    padding: 10px;
+    border-radius: 4px;
+    background-color: #e3f2fd;
+    border: 1px solid #bbdefb;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    text-align: center;
+    cursor: pointer;
+    z-index: 1;
+}
+.step-node.selected {
+    border: 2px solid #1976d2;
+}
+.step-node.status-succeeded {
+    background-color: #e8f5e9;
+    border-color: #c8e6c9;
+}
+.step-node.status-failed {
+    background-color: #ffebee;
+    border-color: #ffcdd2;
+}
+.step-node.status-in_progress {
+    background-color: #fff8e1;
+    border-color: #ffecb3;
+}
+.step-node.status-created, .step-node.status-initialized {
+    background-color: #e3f2fd;
+    border-color: #bbdefb;
+}
+.step-node.status-stopped {
+    background-color: #f5f5f5;
+    border-color: #e0e0e0;
+}
+.step-node.status-timed_out {
+    background-color: #fbe9e7;
+    border-color: #ffccbc;
+}
+.step-edge {
+    position: absolute;
+    height: 2px;
+    background-color: #90caf9;
+    z-index: 0;
+    transform-origin: 0 0;
+}
+.step-details {
+    margin-top: 15px;
+    padding: 15px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background-color: white;
+}
+.attempt-selector {
+    margin-bottom: 10px;
+}
+.step-info {
+    margin-top: 10px;
+}
+.step-info-item {
+    margin-bottom: 5px;
+}
+.step-info-label {
+    font-weight: bold;
+}
+.dropdown {
+    padding: 8px;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+    background-color: white;
+    font-size: 14px;
+}
+.clickable {
+    cursor: pointer;
+}

maestro-server/src/main/resources/static/index.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Maestro</title>
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
+    <meta http-equiv="Pragma" content="no-cache"/>
+    <meta http-equiv="Expires" content="0"/>
+    <link rel="stylesheet" href="css/styles.css">
+</head>
+<body>
+<div class="container">
+    <div class="header">
+        <h1 id="pageTitle">Workflow Instances</h1>
+        <button id="startButton">Start New Instance</button>
+    </div>
+    <div id="errorsContainer" class="errors-container"></div>
+
+    <!-- Instance details container (hidden by default) -->
+    <div id="instanceDetailsContainer" class="instance-details">
+        <h2>Workflow Instance: <span id="instanceIdDisplay"></span></h2>
+
+        <!-- Run selector -->
+        <div class="run-selector">
+            <label for="runSelector">Select Run: </label>
+            <select id="runSelector" class="dropdown"></select>
+        </div>
+
+        <!-- DAG visualization -->
+        <h3>Workflow Steps</h3>
+        <div id="dagContainer" class="dag-container"></div>
+
+        <!-- Step details -->
+        <div id="stepDetailsContainer" class="step-details" style="display: none;">
+            <h3>Step Details: <span id="stepIdDisplay"></span></h3>
+
+            <!-- Attempt selector -->
+            <div class="attempt-selector">
+                <label for="attemptSelector">Select Attempt: </label>
+                <select id="attemptSelector" class="dropdown"></select>
+            </div>
+
+            <!-- Step information -->
+            <div id="stepInfo" class="step-info"></div>
+        </div>
+    </div>
+
+    <table id="workflowTable">
+        <thead>
+            <tr>
+                <th>Instance ID</th>
+                <th>Status</th>
+                <th>Create Time</th>
+                <th>Start Time</th>
+                <th>End Time</th>
+                <th>UUID</th>
+            </tr>
+        </thead>
+        <tbody id="result"></tbody>
+    </table>
+</div>
+
+<script type="module" src="js/main.js"></script>
+</body>
+</html>