From 14fc1190a88028ffbbd4d334c344268a6024dd2a Mon Sep 17 00:00:00 2001 From: Amir Raminfar Date: Sat, 24 Jun 2023 12:13:39 -0700 Subject: [PATCH] feat: supports multiple hosts in parallel and update hosts menu (#2269) * feat: updates host menu to be part of side menu * updates routes to be host/id * fixes go tests * fixes js tests * fixes typescheck * fixes int tests * fixes mobile * fixes bug in merging containers * fixed minor bug with menu --- .gitignore | 2 +- .reflex | 2 +- Makefile | 2 +- assets/components.d.ts | 2 + assets/components/FuzzySearchModal.vue | 7 +- .../LogViewer/LogEventSource.spec.ts | 4 +- assets/components/SideMenu.vue | 221 ++++++++---------- assets/components/SidePanel.vue | 71 ++++++ assets/components/common/MobileMenu.vue | 16 +- assets/composables/eventsource.ts | 22 +- assets/composables/storage.ts | 6 +- assets/layouts/default.vue | 2 +- assets/models/Container.spec.ts | 2 +- assets/models/Container.ts | 1 + assets/stores/config.ts | 2 +- assets/stores/container.ts | 48 ++-- assets/types/Container.d.ts | 1 + docker/client.go | 25 +- docker/client_test.go | 26 +-- docker/types.go | 2 + e2e/auth.spec.ts | 2 +- e2e/default.spec.ts | 2 +- .../dark-homepage-1-Mobile-Chrome-linux.png | Bin 21404 -> 21980 bytes .../dark-homepage-1-chromium-linux.png | Bin 29599 -> 32165 bytes .../dark-homepage-1-webkit-linux.png | Bin 25953 -> 27136 bytes ...default-homepage-1-Mobile-Chrome-linux.png | Bin 21914 -> 22345 bytes .../default-homepage-1-chromium-linux.png | Bin 30085 -> 32285 bytes .../default-homepage-1-webkit-linux.png | Bin 26115 -> 27255 bytes main.go | 14 +- main_test.go | 24 +- web/__snapshots__/web.snapshot | 11 +- web/events.go | 39 ++-- web/logs.go | 9 +- web/routes.go | 13 +- web/routes_auth_test.go | 8 +- web/routes_events_test.go | 71 ++++++ web/routes_logs_test.go | 175 ++------------ web/routes_test.go | 24 +- 38 files changed, 456 insertions(+), 400 deletions(-) create mode 100644 assets/components/SidePanel.vue create mode 100644 web/routes_events_test.go diff --git a/.gitignore b/.gitignore index dfb68a92..126803ab 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,4 @@ - +certs dist node_modules .cache diff --git a/.reflex b/.reflex index 49d50f5b..29d789e3 100644 --- a/.reflex +++ b/.reflex @@ -1 +1 @@ --r '\.(go)$' -R 'node_modules' -G '*_test.go' -s -- go run main.go --level debug +-r '\.(go)$' -R 'node_modules' -G '*_test.go' -s -- go run main.go --level debug --remote-host tcp://64.225.88.189:2376 diff --git a/Makefile b/Makefile index 92eac69f..f9053a8d 100644 --- a/Makefile +++ b/Makefile @@ -31,4 +31,4 @@ dev: .PHONY: int int: - docker compose up --force-recreate --exit-code-from playwright + docker compose up --build --force-recreate --exit-code-from playwright diff --git a/assets/components.d.ts b/assets/components.d.ts index e9981a47..8ef375a0 100644 --- a/assets/components.d.ts +++ b/assets/components.d.ts @@ -19,6 +19,7 @@ declare module 'vue' { ContainerPopup: typeof import('./components/LogViewer/ContainerPopup.vue')['default'] ContainerStat: typeof import('./components/LogViewer/ContainerStat.vue')['default'] ContainerTitle: typeof import('./components/LogViewer/ContainerTitle.vue')['default'] + copy: typeof import('./components/SidePanel copy.vue')['default'] DateTime: typeof import('./components/common/DateTime.vue')['default'] DistanceTime: typeof import('./components/common/DistanceTime.vue')['default'] DockerEventLogItem: typeof import('./components/LogViewer/DockerEventLogItem.vue')['default'] @@ -52,6 +53,7 @@ declare module 'vue' { ScrollProgress: typeof import('./components/ScrollProgress.vue')['default'] Search: typeof import('./components/Search.vue')['default'] SideMenu: typeof import('./components/SideMenu.vue')['default'] + SidePanel: typeof import('./components/SidePanel.vue')['default'] SimpleLogItem: typeof import('./components/LogViewer/SimpleLogItem.vue')['default'] SkippedEntriesLogItem: typeof import('./components/LogViewer/SkippedEntriesLogItem.vue')['default'] StatMonitor: typeof import('./components/LogViewer/StatMonitor.vue')['default'] diff --git a/assets/components/FuzzySearchModal.vue b/assets/components/FuzzySearchModal.vue index a7ab995f..0827e88f 100644 --- a/assets/components/FuzzySearchModal.vue +++ b/assets/components/FuzzySearchModal.vue @@ -17,9 +17,7 @@ -
- {{ item.name }} -
+
{{ item.host }} / {{ item.name }}
{ - return containers.value.map(({ id, created, name, state }) => { + return containers.value.map(({ id, created, name, state, host }) => { return { id, created, name, state, + host, }; }); }); diff --git a/assets/components/LogViewer/LogEventSource.spec.ts b/assets/components/LogViewer/LogEventSource.spec.ts index aa37b8ef..60d7d48c 100644 --- a/assets/components/LogViewer/LogEventSource.spec.ts +++ b/assets/components/LogViewer/LogEventSource.spec.ts @@ -71,7 +71,7 @@ describe("", () => { LogViewer, }, provide: { - container: computed(() => ({ id: "abc", image: "test:v123" })), + container: computed(() => ({ id: "abc", image: "test:v123", host: "localhost" })), "stream-config": reactive({ stdout: true, stderr: true }), scrollingPaused: computed(() => false), }, @@ -85,7 +85,7 @@ describe("", () => { }); } - const sourceUrl = "/api/logs/stream?id=abc&lastEventId=&host=localhost&stdout=1&stderr=1"; + const sourceUrl = "/api/logs/stream/localhost/abc?lastEventId=&stdout=1&stderr=1"; test("renders correctly", async () => { const wrapper = createLogEventSource(); diff --git a/assets/components/SideMenu.vue b/assets/components/SideMenu.vue index 548dad49..fe9cd88c 100644 --- a/assets/components/SideMenu.vue +++ b/assets/components/SideMenu.vue @@ -1,123 +1,88 @@ diff --git a/assets/components/SidePanel.vue b/assets/components/SidePanel.vue new file mode 100644 index 00000000..b43a4a0a --- /dev/null +++ b/assets/components/SidePanel.vue @@ -0,0 +1,71 @@ + + + + diff --git a/assets/components/common/MobileMenu.vue b/assets/components/common/MobileMenu.vue index 5abeb0d5..3ab4c8c1 100644 --- a/assets/components/common/MobileMenu.vue +++ b/assets/components/common/MobileMenu.vue @@ -70,7 +70,7 @@

{{ $t("label.containers") }}

    -
  • +
  • { showNav = false; }); + +const sortedContainers = computed(() => + visibleContainers.value + .filter((c) => c.host === sessionHost.value) + .sort((a, b) => { + if (a.state === "running" && b.state !== "running") { + return -1; + } else if (a.state !== "running" && b.state === "running") { + return 1; + } else { + return a.name.localeCompare(b.name); + } + }) +);