mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-09-08 00:03:07 +00:00
flow layout improvements
This commit is contained in:
Ruben Fiszel
@@ -66,7 +66,7 @@
|
||||
<span class="!text-xs">
|
||||
<HighlightCode language={stepDetail.value.language} code={stepDetail.value.content} />
|
||||
</span>
|
||||
<h3 class="mb-2">Lockfile</h3>
|
||||
<h3 class="mt-4 mb-2">Lockfile</h3>
|
||||
<div>
|
||||
{#if stepDetail.value.lock}
|
||||
<pre class="bg-surface-secondary text-sm p-2 h-full overflow-auto w-full"
|
||||
@@ -171,7 +171,7 @@
|
||||
>{stepDetail.value.lock}</pre
|
||||
>
|
||||
{:else}
|
||||
<p class="bg-surface-secondary text-sm p-2">
|
||||
<p class="bg-surface-secondary text-sm p-2 rounded">
|
||||
There is no lockfile for this inline script
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
@@ -64,9 +64,11 @@
|
||||
</Drawer>
|
||||
<div
|
||||
class:border={!noBorder}
|
||||
class="grid {!col ? 'grid-cols-2' : 'grid-rows-2'} shadow border border-tertiary-inverse h-full"
|
||||
class="grid {!col
|
||||
? 'grid-cols-2'
|
||||
: 'grid-rows-2'} shadow border border-tertiary-inverse grow overflow-hidden"
|
||||
>
|
||||
<div class="bg-surface {col ? '' : 'max-h-80'} h-full p-1 overflow-auto relative">
|
||||
<div class="bg-surface {col ? '' : 'max-h-80'} p-1 overflow-auto relative">
|
||||
<span class="text-tertiary">Result</span>
|
||||
{#if result !== undefined}
|
||||
<DisplayResult {workspaceId} {jobId} {filename} {result} />
|
||||
@@ -76,7 +78,7 @@
|
||||
<div class="text-gray-400">No result (result is undefined)</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="overflow-auto {col ? '' : 'max-h-80'} h-full relative">
|
||||
<div class="overflow-auto {col ? '' : 'max-h-80'} relative">
|
||||
<div class="absolute z-40 text-sm top-1.5 left-2"
|
||||
><button class="" on:click={drawer.openDrawer}>explore all steps' logs</button></div
|
||||
>
|
||||
|
||||
@@ -87,6 +87,7 @@
|
||||
|
||||
function setModuleState(key: string, value: GraphModuleState) {
|
||||
if (!deepEqual($localModuleStates[key], value)) {
|
||||
// console.log('Setting module state', key, value)
|
||||
$localModuleStates[key] = value
|
||||
|
||||
globalModuleStates.forEach((s) => {
|
||||
@@ -337,6 +338,7 @@
|
||||
j: number
|
||||
) {
|
||||
let modId = flowJobIds?.moduleId
|
||||
|
||||
if (modId) {
|
||||
if ($flowStateStore && $flowStateStore?.[modId] == undefined) {
|
||||
$flowStateStore[modId] = {
|
||||
@@ -815,7 +817,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="border-l border-tertiary-inverse pt-1 overflow-auto min-h-[700px] flex flex-col z-0"
|
||||
class="border-l border-tertiary-inverse pt-1 overflow-auto min-h-[700px] flex flex-col z-0 h-full"
|
||||
>
|
||||
<Tabs bind:selected={rightColumnSelect}>
|
||||
<Tab value="timeline"><span class="font-semibold text-md">Timeline</span></Tab>
|
||||
@@ -835,7 +837,7 @@
|
||||
durationStatuses={localDurationStatuses}
|
||||
/>
|
||||
{:else if rightColumnSelect == 'node_status'}
|
||||
<div class="pt-2 max-h-[80vh]">
|
||||
<div class="pt-2 max-h-[80vh] grow flex flex-col">
|
||||
{#if selectedNode}
|
||||
{@const node = $localModuleStates[selectedNode]}
|
||||
|
||||
@@ -864,7 +866,7 @@
|
||||
<p class="p-2 text-secondary">No arguments</p>
|
||||
{/if}
|
||||
{:else if node}
|
||||
<div class="px-2 flex gap-2 min-w-0 overflow-hidden w-full">
|
||||
<div class="px-2 flex gap-2 min-w-0 w-full">
|
||||
<ModuleStatus type={node.type} scheduled_for={node.scheduled_for} />
|
||||
{#if node.duration_ms}
|
||||
<Badge>
|
||||
|
||||
@@ -12,233 +12,231 @@
|
||||
code.hljs {
|
||||
padding: 3px 5px;
|
||||
}
|
||||
|
||||
.dark .hljs {
|
||||
background: #2e3440;
|
||||
background: #2e3440 !important;
|
||||
}
|
||||
.dark .hljs,
|
||||
.dark .hljs-subst {
|
||||
color: #d8dee9;
|
||||
color: #d8dee9 !important;
|
||||
}
|
||||
.dark .hljs-selector-tag {
|
||||
color: #81a1c1;
|
||||
color: #81a1c1 !important;
|
||||
}
|
||||
.dark .hljs-selector-id {
|
||||
color: #8fbcbb;
|
||||
font-weight: bold;
|
||||
color: #8fbcbb !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
.dark .hljs-selector-class {
|
||||
color: #8fbcbb;
|
||||
color: #8fbcbb !important;
|
||||
}
|
||||
.dark .hljs-selector-attr {
|
||||
color: #8fbcbb;
|
||||
color: #8fbcbb !important;
|
||||
}
|
||||
.dark .hljs-property {
|
||||
color: #88c0d0;
|
||||
color: #88c0d0 !important;
|
||||
}
|
||||
.dark .hljs-selector-pseudo {
|
||||
color: #88c0d0;
|
||||
color: #88c0d0 !important;
|
||||
}
|
||||
.dark .hljs-addition {
|
||||
background-color: rgba(163, 190, 140, 0.5);
|
||||
background-color: rgba(163, 190, 140, 0.5) !important;
|
||||
}
|
||||
.dark .hljs-deletion {
|
||||
background-color: rgba(191, 97, 106, 0.5);
|
||||
background-color: rgba(191, 97, 106, 0.5) !important;
|
||||
}
|
||||
.dark .hljs-built_in,
|
||||
.dark .hljs-type {
|
||||
color: #8fbcbb;
|
||||
color: #8fbcbb !important;
|
||||
}
|
||||
.dark .hljs-class {
|
||||
color: #8fbcbb;
|
||||
color: #8fbcbb !important;
|
||||
}
|
||||
.dark .hljs-function {
|
||||
color: #88c0d0;
|
||||
color: #88c0d0 !important;
|
||||
}
|
||||
.dark .hljs-title.hljs-function,
|
||||
.dark .hljs-function > .hljs-title {
|
||||
color: #88c0d0;
|
||||
color: #88c0d0 !important;
|
||||
}
|
||||
.dark .hljs-keyword,
|
||||
.dark .hljs-literal,
|
||||
.dark .hljs-symbol {
|
||||
color: #81a1c1;
|
||||
color: #81a1c1 !important;
|
||||
}
|
||||
.dark .hljs-number {
|
||||
color: #b48ead;
|
||||
color: #b48ead !important;
|
||||
}
|
||||
.dark .hljs-regexp {
|
||||
color: #ebcb8b;
|
||||
color: #ebcb8b !important;
|
||||
}
|
||||
.dark .hljs-string {
|
||||
color: #a3be8c;
|
||||
color: #a3be8c !important;
|
||||
}
|
||||
.dark .hljs-title {
|
||||
color: #8fbcbb;
|
||||
color: #8fbcbb !important;
|
||||
}
|
||||
.dark .hljs-params {
|
||||
color: #d8dee9;
|
||||
color: #d8dee9 !important;
|
||||
}
|
||||
.dark .hljs-bullet {
|
||||
color: #81a1c1;
|
||||
color: #81a1c1 !important;
|
||||
}
|
||||
.dark .hljs-code {
|
||||
color: #8fbcbb;
|
||||
color: #8fbcbb !important;
|
||||
}
|
||||
.dark .hljs-emphasis {
|
||||
font-style: italic;
|
||||
font-style: italic !important;
|
||||
}
|
||||
.dark .hljs-formula {
|
||||
color: #8fbcbb;
|
||||
color: #8fbcbb !important;
|
||||
}
|
||||
.dark .hljs-strong {
|
||||
font-weight: bold;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
.dark .hljs-link:hover {
|
||||
-webkit-text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
-webkit-text-decoration: underline !important;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
.dark .hljs-quote {
|
||||
color: #4c566a;
|
||||
color: #4c566a !important;
|
||||
}
|
||||
.dark .hljs-comment {
|
||||
color: #4c566a;
|
||||
color: #4c566a !important;
|
||||
}
|
||||
.dark .hljs-doctag {
|
||||
color: #8fbcbb;
|
||||
color: #8fbcbb !important;
|
||||
}
|
||||
.dark .hljs-meta,
|
||||
.dark .hljs-meta .hljs-keyword {
|
||||
color: #5e81ac;
|
||||
color: #5e81ac !important;
|
||||
}
|
||||
.dark .hljs-meta .hljs-string {
|
||||
color: #a3be8c;
|
||||
color: #a3be8c !important;
|
||||
}
|
||||
.dark .hljs-attr {
|
||||
color: #8fbcbb;
|
||||
color: #8fbcbb !important;
|
||||
}
|
||||
.dark .hljs-attribute {
|
||||
color: #d8dee9;
|
||||
color: #d8dee9 !important;
|
||||
}
|
||||
.dark .hljs-name {
|
||||
color: #81a1c1;
|
||||
color: #81a1c1 !important;
|
||||
}
|
||||
.dark .hljs-section {
|
||||
color: #88c0d0;
|
||||
color: #88c0d0 !important;
|
||||
}
|
||||
.dark .hljs-tag {
|
||||
color: #81a1c1;
|
||||
color: #81a1c1 !important;
|
||||
}
|
||||
.dark .hljs-variable {
|
||||
color: #d8dee9;
|
||||
color: #d8dee9 !important;
|
||||
}
|
||||
.dark .hljs-template-variable {
|
||||
color: #d8dee9;
|
||||
color: #d8dee9 !important;
|
||||
}
|
||||
.dark .hljs-template-tag {
|
||||
color: #5e81ac;
|
||||
color: #5e81ac !important;
|
||||
}
|
||||
.dark .language-abnf .hljs-attribute {
|
||||
color: #88c0d0;
|
||||
color: #88c0d0 !important;
|
||||
}
|
||||
.dark .language-abnf .hljs-symbol {
|
||||
color: #ebcb8b;
|
||||
color: #ebcb8b !important;
|
||||
}
|
||||
.dark .language-apache .hljs-attribute {
|
||||
color: #88c0d0;
|
||||
color: #88c0d0 !important;
|
||||
}
|
||||
.dark .language-apache .hljs-section {
|
||||
color: #81a1c1;
|
||||
color: #81a1c1 !important;
|
||||
}
|
||||
.dark .language-arduino .hljs-built_in {
|
||||
color: #88c0d0;
|
||||
color: #88c0d0 !important;
|
||||
}
|
||||
.dark .language-aspectj .hljs-meta {
|
||||
color: #d08770;
|
||||
color: #d08770 !important;
|
||||
}
|
||||
.dark .language-aspectj > .hljs-title {
|
||||
color: #88c0d0;
|
||||
color: #88c0d0 !important;
|
||||
}
|
||||
.dark .language-bnf .hljs-attribute {
|
||||
color: #8fbcbb;
|
||||
color: #8fbcbb !important;
|
||||
}
|
||||
.dark .language-clojure .hljs-name {
|
||||
color: #88c0d0;
|
||||
color: #88c0d0 !important;
|
||||
}
|
||||
.dark .language-clojure .hljs-symbol {
|
||||
color: #ebcb8b;
|
||||
color: #ebcb8b !important;
|
||||
}
|
||||
.dark .language-coq .hljs-built_in {
|
||||
color: #88c0d0;
|
||||
color: #88c0d0 !important;
|
||||
}
|
||||
.dark .language-cpp .hljs-meta .hljs-string {
|
||||
color: #8fbcbb;
|
||||
color: #8fbcbb !important;
|
||||
}
|
||||
.dark .language-css .hljs-built_in {
|
||||
color: #88c0d0;
|
||||
color: #88c0d0 !important;
|
||||
}
|
||||
.dark .language-css .hljs-keyword {
|
||||
color: #d08770;
|
||||
color: #d08770 !important;
|
||||
}
|
||||
.dark .language-diff .hljs-meta {
|
||||
color: #8fbcbb;
|
||||
color: #8fbcbb !important;
|
||||
}
|
||||
.dark .language-ebnf .hljs-attribute {
|
||||
color: #8fbcbb;
|
||||
color: #8fbcbb !important;
|
||||
}
|
||||
.dark .language-glsl .hljs-built_in {
|
||||
color: #88c0d0;
|
||||
color: #88c0d0 !important;
|
||||
}
|
||||
.dark .language-groovy .hljs-meta:not(:first-child) {
|
||||
color: #d08770;
|
||||
color: #d08770 !important;
|
||||
}
|
||||
.dark .language-haxe .hljs-meta {
|
||||
color: #d08770;
|
||||
color: #d08770 !important;
|
||||
}
|
||||
.dark .language-java .hljs-meta {
|
||||
color: #d08770;
|
||||
color: #d08770 !important;
|
||||
}
|
||||
.dark .language-ldif .hljs-attribute {
|
||||
color: #8fbcbb;
|
||||
color: #8fbcbb !important;
|
||||
}
|
||||
.dark .language-lisp .hljs-name {
|
||||
color: #88c0d0;
|
||||
color: #88c0d0 !important;
|
||||
}
|
||||
.dark .language-lua .hljs-built_in {
|
||||
color: #88c0d0;
|
||||
color: #88c0d0 !important;
|
||||
}
|
||||
.dark .language-moonscript .hljs-built_in {
|
||||
color: #88c0d0;
|
||||
color: #88c0d0 !important;
|
||||
}
|
||||
.dark .language-nginx .hljs-attribute {
|
||||
color: #88c0d0;
|
||||
color: #88c0d0 !important;
|
||||
}
|
||||
.dark .language-nginx .hljs-section {
|
||||
color: #5e81ac;
|
||||
color: #5e81ac !important;
|
||||
}
|
||||
.dark .language-pf .hljs-built_in {
|
||||
color: #88c0d0;
|
||||
color: #88c0d0 !important;
|
||||
}
|
||||
.dark .language-processing .hljs-built_in {
|
||||
color: #88c0d0;
|
||||
color: #88c0d0 !important;
|
||||
}
|
||||
.dark .language-scss .hljs-keyword {
|
||||
color: #81a1c1;
|
||||
color: #81a1c1 !important;
|
||||
}
|
||||
.dark .language-stylus .hljs-keyword {
|
||||
color: #81a1c1;
|
||||
color: #81a1c1 !important;
|
||||
}
|
||||
.dark .language-swift .hljs-meta {
|
||||
color: #d08770;
|
||||
color: #d08770 !important;
|
||||
}
|
||||
.dark .language-vim .hljs-built_in {
|
||||
color: #88c0d0;
|
||||
font-style: italic;
|
||||
color: #88c0d0 !important;
|
||||
font-style: italic !important;
|
||||
}
|
||||
.dark .language-yaml .hljs-meta {
|
||||
color: #d08770;
|
||||
color: #d08770 !important;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
color: #24292e;
|
||||
background: #ffffff;
|
||||
|
||||
Reference in New Issue
Block a user