fix: monaco editor

fix: apex charts

app/Livewire/MonacoEditor.php

@@ -12,26 +12,26 @@ class MonacoEditor extends Component
         'configurationChanged' => '$refresh',
     ];
 
-    public $language;
-
     public function __construct(
-        public ?string $id = null,
+        public ?string $id,
-        public ?string $name = null,
+        public ?string $name,
-        public ?string $type = 'text',
+        public ?string $type,
-        public ?string $monacoContent = null,
+        public ?string $monacoContent,
-        public ?string $value = null,
+        public ?string $value,
-        public ?string $label = null,
+        public ?string $label,
-        public ?string $placeholder = null,
+        public ?string $placeholder,
-        public bool $required = false,
+        public bool $required,
-        public bool $disabled = false,
+        public bool $disabled,
-        public bool $readonly = false,
+        public bool $readonly,
-        public bool $allowTab = false,
+        public bool $allowTab,
-        public bool $spellcheck = false,
+        public bool $spellcheck,
-        public ?string $helper = null,
+        public ?string $helper,
-        public bool $realtimeValidation = false,
+        public bool $realtimeValidation,
-        public bool $allowToPeak = true,
+        public bool $allowToPeak,
-        public string $defaultClass = 'input scrollbar font-mono',
+        public string $defaultClass,
-        public string $defaultClassInput = 'input'
+        public string $defaultClassInput,
+        public ?string $language
+
     ) {
         //
     }

app/Livewire/Project/Shared/Logs.php

@@ -59,15 +59,6 @@ public function loadContainers($server_id)
         }
     }
 
-    public function loadMetrics()
-    {
-        return;
-        $server = data_get($this->resource, 'destination.server');
-        if ($server->isFunctional()) {
-            $this->cpu = $server->getCpuMetrics();
-        }
-    }
-
     public function mount()
     {
         try {
@@ -122,7 +113,6 @@ public function mount()
 
             }
 
-            $this->loadMetrics();
         } catch (\Exception $e) {
             return handleError($e, $this);
         }

app/View/Components/ApexCharts.php

@@ -1,34 +0,0 @@
-<?php
-
-namespace App\View\Components;
-
-use Closure;
-use Illuminate\Contracts\View\View;
-use Illuminate\View\Component;
-
-class ApexCharts extends Component
-{
-    public string $chartId;
-
-    public $seriesData;
-
-    public $categories;
-
-    public $seriesName;
-
-    public function __construct($chartId, $seriesData, $categories, $seriesName = '')
-    {
-        $this->chartId = $chartId;
-        $this->seriesData = $seriesData;
-        $this->categories = $categories;
-        $this->seriesName = $seriesName ?? 'Series';
-    }
-
-    /**
-     * Get the view / contents that represent the component.
-     */
-    public function render(): View|Closure|string
-    {
-        return view('components.apex-charts');
-    }
-}

resources/css/app.css

@@ -4,7 +4,6 @@
 
 html,
 body {
-    zoom: 0.95;
     @apply h-full bg-neutral-50 text-neutral-800 dark:bg-base dark:text-neutral-400;
 }
 
@@ -12,6 +11,18 @@ body {
     @apply text-sm antialiased scrollbar;
 }
 
+.apexcharts-tooltip {
+    @apply dark:text-white dark:border-coolgray-300 dark:bg-coolgray-200 shadow-none !important;
+}
+
+.apexcharts-tooltip-title {
+    @apply hidden !important;
+}
+
+.apexcharts-xaxistooltip {
+    @apply hidden !important;
+}
+
 .input,
 .select {
     @apply text-black dark:bg-coolgray-100 dark:text-white ring-neutral-200 dark:ring-coolgray-300;
@@ -116,15 +127,19 @@ .alert-success {
 .alert-error {
     @apply flex items-center gap-2 text-error;
 }
+
 .tag {
     @apply px-2 py-1 cursor-pointer box-description dark:bg-coolgray-100 dark:hover:bg-coolgray-300 bg-neutral-100 hover:bg-neutral-200;
 }
+
 .add-tag {
     @apply flex items-center px-2 text-xs cursor-pointer dark:text-neutral-500/20 text-neutral-500 group-hover:text-neutral-700 group-hover:dark:text-white dark:hover:bg-coolgray-300 hover:bg-neutral-200;
 }
+
 .dropdown-item {
     @apply relative flex cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs items-center pr-4 pl-2 py-1 text-xs justify-start outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 gap-2 w-full;
 }
+
 .dropdown-item-no-padding {
     @apply relative flex cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs items-center py-1 text-xs justify-start outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 gap-2 w-full;
 }
@@ -200,12 +215,15 @@ .kbd-custom {
 .box {
     @apply relative flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 bg-white border text-black dark:text-white hover:text-black border-neutral-200 dark:border-black hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:no-underline;
 }
+
 .box-boarding {
     @apply flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 dark:text-white bg-neutral-50 border border-neutral-200 dark:border-black hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:text-black hover:no-underline text-black;
 }
+
 .box-without-bg {
     @apply flex p-2 transition-colors dark:hover:text-white hover:no-underline min-h-[4rem] border border-neutral-200 dark:border-black;
 }
+
 .box-without-bg-without-border {
     @apply flex p-2 transition-colors dark:hover:text-white hover:no-underline min-h-[4rem];
 }

resources/views/components/forms/monaco-editor.blade.php

@@ -1,7 +1,5 @@
 <div wire:key="{{ rand() }}" class="coolify-monaco-editor flex-1">
-    <div
+    <div x-ref="monacoRef" x-data="{
-        x-ref="monacoRef"
-        x-data="{
         monacoContent: @entangle($id),
         monacoLanguage: '',
         monacoPlaceholder: true,
@@ -25,33 +23,29 @@
             this.monacoPlaceholder = value === '';
         },
         monacoEditorFocus() {
-            document.getElementById(this.monacoId).dispatchEvent(new CustomEvent('monaco-editor-focused', { detail: { monacoId: this.monacoId }}));
+            document.getElementById(this.monacoId).dispatchEvent(new CustomEvent('monaco-editor-focused', { detail: { monacoId: this.monacoId } }));
         },
         monacoEditorAddLoaderScriptToHead() {
             let script = document.createElement('script');
             script.src = 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min/vs/loader.min.js';
             document.head.appendChild(script);
         }
-    }"
+    }" x-modelable="monacoContent">
-        x-modelable="monacoContent"
+        <div x-cloak x-init="if (typeof _amdLoaderGlobal == 'undefined') {
-    >
-        <div
-            x-cloak x-init="
-        if(typeof _amdLoaderGlobal == 'undefined') {
             monacoEditorAddLoaderScriptToHead();
         }
+        checkTheme();
         let monacoLoaderInterval = setInterval(() => {
-            if(typeof _amdLoaderGlobal !== 'undefined') {
+            if (typeof _amdLoaderGlobal !== 'undefined') {
-                require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min/vs' }});
+                require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min/vs' } });
                 let proxy = URL.createObjectURL(new Blob([` self.MonacoEnvironment = { baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min' }; importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min/vs/base/worker/workerMain.min.js');`], { type: 'text/javascript' }));
                 window.MonacoEnvironment = { getWorkerUrl: () => proxy };
                 require(['vs/editor/editor.main'], () => {
                     monaco.editor.defineTheme('blackboard', {
                         'base': 'vs-dark',
                         'inherit': true,
-                    'rules': [
+                        'rules': [{
-                    {
+                                'background': editorBackground,
-                    'background': '24292e',
                                 'token': ''
                             },
                             {
@@ -383,7 +377,7 @@
                         ],
                         'colors': {
                             'editor.foreground': '#f6f8fa',
-                    'editor.background': '#24292e',
+                            'editor.background': editorBackground,
                             'editor.selectionBackground': '#4c2889',
                             'editor.inactiveSelectionBackground': '#444d56',
                             'editor.lineHighlightBackground': '#444d56',
@@ -397,11 +391,14 @@
 
                     const editor = monaco.editor.create($refs.monacoEditorElement, {
                         value: monacoContent,
-                        theme: 'blackboard',
+                        theme: editorTheme,
+                        wordWrap: 'on',
+                        readOnly: '{{ $readonly ?? false }}',
+                        minimap: { enabled: false },
                         fontSize: monacoFontSize,
                         lineNumbersMinChars: 3,
                         automaticLayout: true,
-                        language: '{{$language}}'
+                        language: '{{ $language }}'
 
                     });
 
@@ -427,20 +424,9 @@
                 monacoLoader = false;
 
             }
-        }, 5);
+        }, 5);" :id="monacoId">
-        "
-             :id="monacoId">
         </div>
-        <div x-show="monacoLoader"
+        <div class="relative z-10 w-full h-full">
-             class="absolute inset-0 z-20 flex items-center justify-center w-full h-full duration-1000 ease-out">
-            <svg class="w-4 h-4 text-gray-400 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none"
-                 viewBox="0 0 24 24">
-                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                <path class="opacity-75" fill="currentColor"
-                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-            </svg>
-        </div>
-        <div x-show="!monacoLoader" class="relative z-10 w-full h-full">
             <div x-ref="monacoEditorElement" class="w-full h-96 text-md"></div>
             <div x-ref="monacoPlaceholderElement" x-show="monacoPlaceholder" @click="monacoEditorFocus()"
                 :style="'font-size: ' + monacoFontSize"

resources/views/components/forms/textarea.blade.php

@@ -24,16 +24,10 @@ function handleKeydown(e) {
             @endif
         </label>
     @endif
-    @if($useMonacoEditor)
+    @if ($useMonacoEditor)
-        <x-forms.monaco-editor
+        <x-forms.monaco-editor id="{{ $id }}" language="{{ $monacoEditorLanguage }}" name="{{ $name }}"
-            id="{{ $id }}"
+            name="{{ $id }}" model="{{ $value ?? $id }}" wire:model="{{ $value ?? $id }}"
-            language="{{$monacoEditorLanguage }}"
+            readonly="{{ $readonly }}" label="dockerfile" />
-            name="{{ $name }}"
-            name="{{ $id }}"
-            model="{{ $value ?? $id }}"
-            wire:model="{{ $value ?? $id }}"
-            label="dockerfile"
-        />
     @else
         @if ($type === 'password')
             <div class="relative" x-data="{ type: 'password' }">
@@ -44,7 +38,8 @@ class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer
                             stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                             <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                             <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
-                        <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
+                            <path
+                                d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
                         </svg>
                     </div>
                 @endif
@@ -67,7 +62,8 @@ class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer
 
             </div>
         @else
-        <textarea {{ $allowTab ? '@keydown.tab=handleKeydown' : '' }} placeholder="{{ $placeholder }}" {{ !$spellcheck ? 'spellcheck=false' : '' }} {{ $attributes->merge(['class' => $defaultClass]) }}
+            <textarea {{ $allowTab ? '@keydown.tab=handleKeydown' : '' }} placeholder="{{ $placeholder }}"
+                {{ !$spellcheck ? 'spellcheck=false' : '' }} {{ $attributes->merge(['class' => $defaultClass]) }}
                 @if ($realtimeValidation) wire:model.debounce.200ms="{{ $id }}"
         @else
     wire:model={{ $value ?? $id }}

resources/views/layouts/base.blade.php

@@ -63,15 +63,21 @@
             let theme = localStorage.theme
             let baseColor = '#FCD452'
             let textColor = '#ffffff'
+            let editorBackground = '#181818'
+            let editorTheme = 'blackboard'
 
             function checkTheme() {
                 theme = localStorage.theme
                 if (theme == 'dark') {
                     baseColor = '#FCD452'
                     textColor = '#ffffff'
+                    editorBackground = '#181818'
+                    editorTheme = 'blackboard'
                 } else {
                     baseColor = 'black'
                     textColor = '#000000'
+                    editorBackground = '#ffffff'
+                    editorTheme = null
                 }
             }
             @auth

resources/views/livewire/project/application/general.blade.php

@@ -73,7 +73,7 @@
                         <option value="www">Redirect to www.</option>
                         <option value="non-www">Redirect to non-www.</option>
                     </x-forms.select>
-                    <x-modal-confirmation action="set_redirect" >
+                    <x-modal-confirmation action="set_redirect">
                         <x-slot:customButton>
                             <div class="w-[7.2rem]">Set Direction</div>
                         </x-slot:customButton>
@@ -231,10 +231,12 @@ class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
                 @if ($application->settings->is_raw_compose_deployment_enabled)
                     <x-forms.textarea rows="10" readonly id="application.docker_compose_raw"
                         label="Docker Compose Content (applicationId: {{ $application->id }})"
-                        helper="You need to modify the docker compose file." />
+                        helper="You need to modify the docker compose file." monacoEditorLanguage="yaml"
+                        useMonacoEditor />
                 @else
                     <x-forms.textarea rows="10" readonly id="application.docker_compose"
-                        label="Docker Compose Content" helper="You need to modify the docker compose file." />
+                        label="Docker Compose Content" helper="You need to modify the docker compose file."
+                        monacoEditorLanguage="yaml" useMonacoEditor />
                 @endif
                 <div class="w-72">
                     <x-forms.checkbox label="Escape special characters in labels?"
@@ -246,7 +248,8 @@ class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
             @endif
 
             @if ($application->dockerfile)
-                <x-forms.textarea label="Dockerfile" id="application.dockerfile" monacoEditorLanguage="dockerfile" useMonacoEditor="{{true}}" rows="6"> </x-forms.textarea>
+                <x-forms.textarea label="Dockerfile" id="application.dockerfile" monacoEditorLanguage="dockerfile"
+                    useMonacoEditor rows="6"> </x-forms.textarea>
             @endif
             @if ($application->build_pack !== 'dockercompose')
                 <h3 class="pt-8">Network</h3>
@@ -263,7 +266,9 @@ class="underline" href="https://coolify.io/docs/knowledge-base/docker/registry"
                             helper="A comma separated list of ports you would like to map to the host system. Useful when you do not want to use domains.<br><br><span class='inline-block font-bold dark:text-warning'>Example:</span><br>3000:3000,3002:3002<br><br>Rolling update is not supported if you have a port mapped to the host." />
                     @endif
                 </div>
-                <x-forms.textarea label="Container Labels" rows="15" id="customLabels"></x-forms.textarea>
+
+                <x-forms.textarea label="Container Labels" rows="15" id="customLabels"
+                    monacoEditorLanguage="ini" useMonacoEditor></x-forms.textarea>
                 <div class="w-72">
                     <x-forms.checkbox label="Escape special characters in labels?"
                         helper="By default, $ (and other chars) is escaped. So if you write $ in the labels, it will be saved as $$.<br><br>If you want to use env variables inside the labels, turn this off."

resources/views/livewire/project/new/docker-compose.blade.php

@@ -6,7 +6,8 @@
             <h2>Docker Compose</h2>
             <x-forms.button type="submit">Save</x-forms.button>
         </div>
-        <x-forms.textarea useMonacoEditor="{{true}}" monacoEditorLanguage="yaml" label="Docker Compose file" rows="20" id="dockerComposeRaw"
+        <x-forms.textarea useMonacoEditor monacoEditorLanguage="yaml" label="Docker Compose file" rows="20"
+            id="dockerComposeRaw"
             placeholder='services:
   ghost:
     documentation: https://ghost.org/docs/config

resources/views/livewire/project/shared/logs.blade.php

@@ -60,78 +60,4 @@
             @endforelse
         </div>
     @endif
-    {{-- <section x-data="apex_app" class="container p-5 mx-auto my-20 bg-white drop-shadow-xl rounded-xl">
-        <div class="w-full" x-ref="chart"></div>
-    </section>
-    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
-    <script>
-        document.addEventListener("alpine:init", () => {
-            Alpine.data("apex_app", () => ({
-                data: @js($cpu),
-                init() {
-                    let chart = new ApexCharts(this.$refs.chart, this.options);
-                    chart.render();
-                    this.$watch("data", () => {
-                        chart.updateOptions(this.options);
-                    });
-                },
-
-                get options() {
-                    return {
-                        colors: [function({
-                            value,
-                            seriesIndex,
-                            w
-                        }) {
-                            if (value < 55) {
-                                return '#7E36AF'
-                            } else {
-                                return '#D9534F'
-                            }
-                        }, function({
-                            value,
-                            seriesIndex,
-                            w
-                        }) {
-                            if (value < 111) {
-                                return '#7E36AF'
-                            } else {
-                                return '#D9534F'
-                            }
-                        }],
-
-                        xaxis: {
-                            type: 'datetime'
-                        },
-                        dataLabels: {
-                            enabled: false
-                        },
-                        series: [{
-                            name: "Series name",
-                            data: this.data
-                        }],
-                        tooltip: {
-                            enabled: true
-                        },
-                        chart: {
-                            stroke: {
-                            curve: 'smooth',
-                        },
-                            height: 500,
-                            width: "100%",
-                            type: "line",
-                            toolbar: {
-                                show: true
-                            },
-                            animations: {
-                                initialAnimation: {
-                                    enabled: false
-                                }
-                            }
-                        },
-                    };
-                }
-            }));
-        });
-    </script> --}}
 </div>

resources/views/livewire/project/shared/metrics.blade.php

@@ -40,15 +40,15 @@ class="pt-5">
                             id: '{!! $chartId !!}-cpu',
                             type: 'area',
                             toolbar: {
-                                show: false,
+                                show: true,
                                 tools: {
-                                    download: true,
+                                    download: false,
                                     selection: false,
-                                    zoom: false,
+                                    zoom: true,
                                     zoomin: false,
                                     zoomout: false,
                                     pan: false,
-                                    reset: false
+                                    reset: true
                                 },
                             },
                             animations: {
@@ -77,6 +77,7 @@ class="pt-5">
                             type: 'datetime',
                         },
                         series: [{
+                            name: "CPU %",
                             data: []
                         }],
                         noData: {
@@ -86,7 +87,10 @@ class="pt-5">
                             }
                         },
                         tooltip: {
-                            enabled: false,
+                            enabled: true,
+                            marker: {
+                                show: false,
+                            }
                         },
                         legend: {
                             show: false
@@ -145,15 +149,15 @@ class="pt-5">
                             id: '{!! $chartId !!}-memory',
                             type: 'area',
                             toolbar: {
-                                show: false,
+                                show: true,
                                 tools: {
-                                    download: true,
+                                    download: false,
                                     selection: false,
-                                    zoom: false,
+                                    zoom: true,
                                     zoomin: false,
                                     zoomout: false,
                                     pan: false,
-                                    reset: false
+                                    reset: true
                                 },
                             },
                             animations: {
@@ -188,6 +192,7 @@ class="pt-5">
                             }
                         },
                         series: [{
+                            name: "Memory (MB)",
                             data: []
                         }],
                         noData: {
@@ -197,7 +202,10 @@ class="pt-5">
                             }
                         },
                         tooltip: {
-                            enabled: false,
+                            enabled: true,
+                            marker: {
+                                show: false,
+                            }
                         },
                         legend: {
                             show: false

resources/views/livewire/server/charts.blade.php

@@ -22,15 +22,15 @@
                 id: '{!! $chartId !!}-cpu',
                 type: 'area',
                 toolbar: {
-                    show: false,
+                    show: true,
                     tools: {
-                        download: true,
+                        download: false,
                         selection: false,
-                        zoom: false,
+                        zoom: true,
                         zoomin: false,
                         zoomout: false,
                         pan: false,
-                        reset: false
+                        reset: true
                     },
                 },
                 animations: {
@@ -59,6 +59,7 @@
                 type: 'datetime',
             },
             series: [{
+                name: 'CPU %',
                 data: []
             }],
             noData: {
@@ -68,7 +69,10 @@
                 }
             },
             tooltip: {
-                enabled: false,
+                enabled: true,
+                marker: {
+                    show: false,
+                }
             },
             legend: {
                 show: false
@@ -129,15 +133,15 @@
                     id: '{!! $chartId !!}-memory',
                     type: 'area',
                     toolbar: {
-                        show: false,
+                        show: true,
                         tools: {
-                            download: true,
+                            download: false,
                             selection: false,
-                            zoom: false,
+                            zoom: true,
                             zoomin: false,
                             zoomout: false,
                             pan: false,
-                            reset: false
+                            reset: true
                         },
                     },
                     animations: {
@@ -172,6 +176,7 @@
                     }
                 },
                 series: [{
+                    name: "Memory (MB)",
                     data: []
                 }],
                 noData: {
@@ -181,7 +186,10 @@
                     }
                 },
                 tooltip: {
-                    enabled: false,
+                    enabled: true,
+                    marker: {
+                        show: false,
+                    }
                 },
                 legend: {
                     show: false