From 412a10256da2a59405dbcae618f836fb5a61a9ce Mon Sep 17 00:00:00 2001 From: Amir Raminfar Date: Tue, 16 Nov 2021 10:55:44 -0800 Subject: [PATCH] Vue3 (#1594) * WIP vue3 * WIP vue3 * WIP vue3 * Migrates to vitejs * Fixes js tests and removes not needed modules * Fixes unmount * Updates to use css instead for space * Fixes tests and rebases one more time * Uses orgua * Fixes migrations bugs with oruga and fixes scroll * Fixes v-deep * Fixes icons to prod * Fixes icons to prod * Adds favicon back * Transitions some to composition api * Updates another component to comp api * Cleans defineProps * Updates log messages * Moves more to compose api * Cleans up styles and rewrites event source * Tries to fix DOMPurify * Removes postcss * WIP typescript * Improves importing * Converts all to ts * Converts main to ts * Makes changes for tsconfig * Moves more to ts * Adds typing to store * More typing * Updates to ts * Updates the rest to ts * Fixes computes * Fixes unmount * Adds cypress with custom base fixed * Fixes jest tests * Fixes golang tests * Adds gitignore for cypress * Removes int in favor of e2e with cypress * Tries to fix int tests again * Adds title * Updates e2e tests * Uses vue for isMobile * Removes app spec * Cleans up docker * Adds drop down for settings * Fixes bug with restart * Fixes scroll up bug * Adds tests for light mode --- .babelrc | 8 +- .dockerignore | 6 +- .github/workflows/deploy.yml | 4 +- .github/workflows/test.yml | 4 +- Dockerfile | 9 +- Makefile | 20 +- assets/App.spec.js | 64 - assets/App.vue | 174 +- assets/__snapshots__/App.spec.js.snap | 50 - assets/components.d.ts | 36 + assets/components/ContainerStat.vue | 43 +- assets/components/ContainerTitle.vue | 11 +- assets/components/FuzzySearchModal.vue | 27 +- assets/components/InfiniteLoader.vue | 58 +- assets/components/LogActionsToolbar.vue | 65 +- assets/components/LogContainer.vue | 81 +- ...tSource.spec.js => LogEventSource.spec.ts} | 126 +- assets/components/LogEventSource.vue | 242 +- assets/components/LogViewer.vue | 92 +- assets/components/LogViewerWithSource.vue | 35 +- assets/components/MobileMenu.vue | 2 +- assets/components/PastTime.vue | 4 +- assets/components/RelativeTime.vue | 7 +- assets/components/ScrollProgress.vue | 6 +- assets/components/ScrollableView.vue | 38 +- assets/components/Search.vue | 10 +- assets/components/SideMenu.vue | 32 +- .../__snapshots__/LogEventSource.spec.js.snap | 30 - .../__snapshots__/LogEventSource.spec.ts.snap | 14 + assets/components/mixins/container.js | 19 - assets/composables/container.ts | 9 + assets/composables/mediaQuery.ts | 3 + assets/composables/title.ts | 12 + assets/{main.js => main.ts} | 47 +- assets/pages/Container.vue | 25 +- assets/pages/ContainerNotFound.vue | 10 +- assets/pages/Index.vue | 8 +- assets/pages/Login.vue | 9 +- assets/pages/PageNotFound.vue | 9 +- assets/pages/Settings.vue | 78 +- assets/pages/Show.vue | 4 +- assets/pages/{index.js => index.ts} | 0 assets/shims-vue.d.ts | 6 + assets/store/{config.js => config.ts} | 5 +- assets/store/index.js | 120 - assets/store/index.ts | 119 + assets/store/{settings.js => settings.ts} | 0 assets/styles.scss | 23 +- e2e/.gitignore | 3 + e2e/Dockerfile | 12 + e2e/cypress.env.json | 3 + e2e/cypress.json | 3 + e2e/cypress/integration/dozze_dark.spec.js | 25 + e2e/cypress/integration/dozzle_light.spec.js | 15 + e2e/cypress/plugins/index.js | 26 + ...zle default mode -- correct title.snap.png | Bin 0 -> 76842 bytes ...ozzle default mode -- home screen.snap.png | Bin 0 -> 30473 bytes .../Dozzle light mode -- home screen.snap.png | Bin 0 -> 32120 bytes e2e/cypress/support/commands.js | 33 + e2e/cypress/support/index.js | 20 + .../docker-compose.yml | 16 +- e2e/package.json | 10 + e2e/pnpm-lock.yaml | 1447 +++++ assets/index.ejs => index.html | 2 + integration/.dockerignore | 1 - integration/.gitignore | 1 - integration/Dockerfile | 8 - ...se-renders-full-page-on-desktop-1-snap.png | Bin 41343 -> 0 bytes ...ge-renders-full-page-on-desktop-1-snap.png | Bin 38995 -> 0 bytes ...home-page-renders-ipad-viewport-1-snap.png | Bin 69769 -> 0 bytes ...me-page-renders-iphone-viewport-1-snap.png | Bin 80925 -> 0 bytes ...de-renders-full-page-on-desktop-1-snap.png | Bin 39994 -> 0 bytes ...ight-mode-renders-ipad-viewport-1-snap.png | Bin 71443 -> 0 bytes ...ht-mode-renders-iphone-viewport-1-snap.png | Bin 83105 -> 0 bytes integration/__tests__/custom_base.js | 22 - integration/__tests__/default.js | 76 - integration/__tests__/light_mode.js | 41 - integration/jest-puppeteer.config.js | 9 - integration/jest-setup.js | 5 - integration/package.json | 24 - integration/utils.js | 8 - integration/yarn.lock | 3591 ------------ jest.config.js | 13 +- jsconfig.json | 3 - main.go | 12 +- package.json | 94 +- pnpm-lock.yaml | 4856 ++++++----------- tsconfig.json | 23 + vite.config.ts | 48 + web/__snapshots__/web.snapshot | 16 +- web/csp.go | 2 +- webpack.config.js | 86 - 92 files changed, 4294 insertions(+), 8064 deletions(-) delete mode 100644 assets/App.spec.js delete mode 100644 assets/__snapshots__/App.spec.js.snap create mode 100644 assets/components.d.ts rename assets/components/{LogEventSource.spec.js => LogEventSource.spec.ts} (64%) delete mode 100644 assets/components/__snapshots__/LogEventSource.spec.js.snap create mode 100644 assets/components/__snapshots__/LogEventSource.spec.ts.snap delete mode 100644 assets/components/mixins/container.js create mode 100644 assets/composables/container.ts create mode 100644 assets/composables/mediaQuery.ts create mode 100644 assets/composables/title.ts rename assets/{main.js => main.ts} (55%) rename assets/pages/{index.js => index.ts} (100%) create mode 100644 assets/shims-vue.d.ts rename assets/store/{config.js => config.ts} (75%) delete mode 100644 assets/store/index.js create mode 100644 assets/store/index.ts rename assets/store/{settings.js => settings.ts} (100%) create mode 100644 e2e/.gitignore create mode 100644 e2e/Dockerfile create mode 100644 e2e/cypress.env.json create mode 100644 e2e/cypress.json create mode 100644 e2e/cypress/integration/dozze_dark.spec.js create mode 100644 e2e/cypress/integration/dozzle_light.spec.js create mode 100644 e2e/cypress/plugins/index.js create mode 100644 e2e/cypress/snapshots/dozze_dark.spec.js/Dozzle default mode -- correct title.snap.png create mode 100644 e2e/cypress/snapshots/dozze_dark.spec.js/Dozzle default mode -- home screen.snap.png create mode 100644 e2e/cypress/snapshots/dozzle_light.spec.js/Dozzle light mode -- home screen.snap.png create mode 100644 e2e/cypress/support/commands.js create mode 100644 e2e/cypress/support/index.js rename integration/docker-compose.test.yml => e2e/docker-compose.yml (67%) create mode 100644 e2e/package.json create mode 100644 e2e/pnpm-lock.yaml rename assets/index.ejs => index.html (98%) delete mode 100644 integration/.dockerignore delete mode 100644 integration/.gitignore delete mode 100644 integration/Dockerfile delete mode 100644 integration/__tests__/__image_snapshots__/custom-base-js-dozzle-with-custom-base-renders-full-page-on-desktop-1-snap.png delete mode 100644 integration/__tests__/__image_snapshots__/default-js-home-page-renders-full-page-on-desktop-1-snap.png delete mode 100644 integration/__tests__/__image_snapshots__/default-js-home-page-renders-ipad-viewport-1-snap.png delete mode 100644 integration/__tests__/__image_snapshots__/default-js-home-page-renders-iphone-viewport-1-snap.png delete mode 100644 integration/__tests__/__image_snapshots__/light-mode-js-dozzle-with-light-mode-renders-full-page-on-desktop-1-snap.png delete mode 100644 integration/__tests__/__image_snapshots__/light-mode-js-dozzle-with-light-mode-renders-ipad-viewport-1-snap.png delete mode 100644 integration/__tests__/__image_snapshots__/light-mode-js-dozzle-with-light-mode-renders-iphone-viewport-1-snap.png delete mode 100644 integration/__tests__/custom_base.js delete mode 100644 integration/__tests__/default.js delete mode 100644 integration/__tests__/light_mode.js delete mode 100644 integration/jest-puppeteer.config.js delete mode 100644 integration/jest-setup.js delete mode 100644 integration/package.json delete mode 100644 integration/utils.js delete mode 100644 integration/yarn.lock delete mode 100644 jsconfig.json create mode 100644 tsconfig.json create mode 100644 vite.config.ts delete mode 100644 webpack.config.js diff --git a/.babelrc b/.babelrc index 9a79ca61..2fdda153 100644 --- a/.babelrc +++ b/.babelrc @@ -1,8 +1,4 @@ { - "presets": [["env", { "modules": false }]], - "env": { - "test": { - "presets": [["env", { "targets": { "node": "current" } }]] - } - } + "presets": ["@babel/preset-env"], + "plugins": ["@babel/plugin-transform-runtime"] } diff --git a/.dockerignore b/.dockerignore index f18e3290..c5de532f 100644 --- a/.dockerignore +++ b/.dockerignore @@ -1,8 +1,8 @@ node_modules .cache .idea +.github dist .git -static -integration -demo.gif \ No newline at end of file +e2e + diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 7d4ccc27..3b7598f7 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -39,9 +39,9 @@ jobs: - name: Checkout code uses: actions/checkout@v2.4.0 - name: Build images - run: docker-compose -f integration/docker-compose.test.yml build + run: docker-compose -f e2e/docker-compose.yml build - name: Run tests - run: docker-compose -f integration/docker-compose.test.yml run integration + run: docker-compose -f e2e/docker-compose.yml up --build --force-recreate --exit-code-from cypress buildx: needs: [go-test, npm-test, int-test] name: Release diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 2f3a6c4c..81a331a3 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -42,6 +42,6 @@ jobs: - name: Checkout code uses: actions/checkout@v2.4.0 - name: Build images - run: docker-compose -f integration/docker-compose.test.yml build + run: docker-compose -f e2e/docker-compose.yml build - name: Run tests - run: docker-compose -f integration/docker-compose.test.yml run integration + run: docker-compose -f e2e/docker-compose.yml up --build --force-recreate --exit-code-from cypress diff --git a/Dockerfile b/Dockerfile index e3eb8cc4..e8cce879 100644 --- a/Dockerfile +++ b/Dockerfile @@ -10,7 +10,7 @@ COPY pnpm-lock.yaml ./ RUN pnpm fetch --prod # Copy files -COPY package.json .* webpack*.js ./ +COPY package.json .* vite.config.ts index.html ./ # Copy assets to build COPY assets ./assets @@ -32,10 +32,13 @@ COPY go.* ./ RUN go mod download # Copy assets built with node -COPY --from=node /build/static ./static +COPY --from=node /build/dist ./dist # Copy all other files -COPY . . +COPY analytics ./analytics +COPY docker ./docker +COPY web ./web +COPY main.go ./ # Args ARG TAG=dev diff --git a/Makefile b/Makefile index 363769f7..6a9ee2ee 100644 --- a/Makefile +++ b/Makefile @@ -1,24 +1,24 @@ .PHONY: clean clean: - @rm -rf static + @rm -rf dist @go clean -i -.PHONY: static -static: +.PHONY: dist +dist: @pnpm build -.PHONY: fake_static -fake_static: +.PHONY: fake_assets +fake_assets: @echo 'Skipping asset build' - @mkdir -p static - @echo "assets build was skipped" > static/index.html + @mkdir -p dist + @echo "assets build was skipped" > dist/index.html .PHONY: test -test: fake_static +test: fake_assets go test -cover ./... .PHONY: build -build: static +build: dist CGO_ENABLED=0 go build -ldflags "-s -w" .PHONY: docker @@ -31,4 +31,4 @@ dev: .PHONY: int int: - docker-compose -f integration/docker-compose.test.yml up --build --force-recreate --exit-code-from integration + docker-compose -f e2e/docker-compose.yml up --build --force-recreate --exit-code-from cypress diff --git a/assets/App.spec.js b/assets/App.spec.js deleted file mode 100644 index 7e520055..00000000 --- a/assets/App.spec.js +++ /dev/null @@ -1,64 +0,0 @@ -import EventSource from "eventsourcemock"; -import { shallowMount, RouterLinkStub, createLocalVue } from "@vue/test-utils"; -import Vuex from "vuex"; -import App from "./App"; - -jest.mock("./store/config.js", () => ({ base: "" })); - -jest.mock("~icons/octicon/download-24", () => {}, { virtual: true }); -jest.mock("~icons/octicon/trash-24", () => {}, { virtual: true }); -jest.mock("~icons/mdi-light/chevron-double-down", () => {}, { virtual: true }); -jest.mock("~icons/mdi-light/chevron-left", () => {}, { virtual: true }); -jest.mock("~icons/mdi-light/chevron-right", () => {}, { virtual: true }); -jest.mock("~icons/mdi-light/magnify", () => {}, { virtual: true }); -jest.mock("~icons/cil/columns", () => {}, { virtual: true }); -jest.mock("~icons/octicon/container-24", () => {}, { virtual: true }); -jest.mock("~icons/mdi-light/cog", () => {}, { virtual: true }); - -const localVue = createLocalVue(); - -localVue.use(Vuex); - -describe("", () => { - const stubs = { RouterLink: RouterLinkStub, "router-view": true, "chevron-left-icon": true }; - let store; - - beforeEach(() => { - global.EventSource = EventSource; - const state = { - settings: { menuWidth: 15 }, - containers: [{ id: "abc", name: "Test 1" }], - }; - - const getters = { - visibleContainers(store) { - return store.containers; - }, - activeContainers() { - return []; - }, - }; - - store = new Vuex.Store({ - state, - getters, - }); - }); - - test("has right title", async () => { - const wrapper = shallowMount(App, { stubs, store, localVue }); - wrapper.vm.$store.state.containers = [ - { id: "abc", name: "Test 1" }, - { id: "xyz", name: "Test 2" }, - ]; - await wrapper.vm.$nextTick(); - - expect(wrapper.vm.title).toContain("2 containers"); - }); - - test("renders correctly", async () => { - const wrapper = shallowMount(App, { stubs, store, localVue }); - await wrapper.vm.$nextTick(); - expect(wrapper.element).toMatchSnapshot(); - }); -}); diff --git a/assets/App.vue b/assets/App.vue index 1f950f38..94d7c671 100644 --- a/assets/App.vue +++ b/assets/App.vue @@ -3,7 +3,7 @@ - + @@ -18,7 +18,7 @@ show-title scrollable closable - @close="removeActiveContainer(other)" + @close="store.dispatch('REMOVE_ACTIVE_CONTAINER', other)" > @@ -27,128 +27,96 @@ - + diff --git a/assets/components/ContainerTitle.vue b/assets/components/ContainerTitle.vue index fc341915..c4a50582 100644 --- a/assets/components/ContainerTitle.vue +++ b/assets/components/ContainerTitle.vue @@ -7,13 +7,10 @@ - diff --git a/assets/components/FuzzySearchModal.vue b/assets/components/FuzzySearchModal.vue index a1964137..13090da1 100644 --- a/assets/components/FuzzySearchModal.vue +++ b/assets/components/FuzzySearchModal.vue @@ -1,9 +1,9 @@