Merge branch 'v3' into PMM-12641-optimize-pmm-build-scripts

build/packer/ansible/roles/podman-setup/tasks/main.yml

@@ -72,6 +72,14 @@
     group: admin
     mode: '0644'
 
+- name: Copy watchtower environment file for service to user-specific directory
+  template:
+    src: watchtower.env
+    dest: /home/admin/.config/systemd/user/
+    owner: admin
+    group: admin
+    mode: '0644'
+
 - name: Copy watchtower systemd service file to user-specific directory
   template:
     src: watchtower.service

build/packer/ansible/roles/podman-setup/templates/pmm-server.env

@@ -1,5 +1,5 @@
 PMM_WATCHTOWER_HOST=http://watchtower:8080
 PMM_WATCHTOWER_TOKEN=123
-PMM_SERVER_UPDATE_VERSION=docker.io/perconalab/pmm-server:3-dev-container
+PMM_DEV_UPDATE_DOCKER_IMAGE=docker.io/perconalab/pmm-server:3-dev-container
 PMM_IMAGE={{ pmm_server_image_name }}
-PMM_DISTRIBUTION_METHOD={{ pmm_distribution_method }}
+PMM_DISTRIBUTION_METHOD={{ pmm_distribution_method }}

build/packer/ansible/roles/podman-setup/templates/pmm-server.service

@@ -14,7 +14,7 @@ RestartSec=20
 ExecStart=/usr/bin/podman run \
     --volume /home/admin/volume/srv:/srv \
     --volume /home/admin/.ssh/:/home/pmm/.ssh/ \
-    --volume /home/admin/.config/:/home/pmm/config/  \
+    --volume /home/admin/.config/systemd/user/:/home/pmm/update/  \
     --rm --replace=true --name %N \
     --env-file=/home/admin/.config/systemd/user/pmm-server.env \
     --net pmm_default \

build/packer/ansible/roles/podman-setup/templates/watchtower.env

@@ -0,0 +1,5 @@
+WATCHTOWER_HTTP_API_UPDATE=1
+WATCHTOWER_HTTP_API_TOKEN=123
+WATCHTOWER_NO_RESTART=1
+WATCHTOWER_DEBUG=1
+WATCHTOWER_CLEANUP=1

build/packer/ansible/roles/podman-setup/templates/watchtower.service

@@ -8,21 +8,14 @@ After=time-sync.target
 [Service]
 Restart=on-failure
 RestartSec=20
-
-Environment=WATCHTOWER_HTTP_API_UPDATE=1
-Environment=WATCHTOWER_HTTP_API_TOKEN=123
-Environment=WATCHTOWER_NO_RESTART=1
-Environment=WATCHTOWER_DEBUG=1
+EnvironmentFile=/home/admin/.config/systemd/user/watchtower.env
 
 ExecStart=/usr/bin/podman run --rm --replace=true --name %N \
     -v ${XDG_RUNTIME_DIR}/podman/podman.sock:/var/run/docker.sock \
-    -e WATCHTOWER_HTTP_API_UPDATE=${WATCHTOWER_HTTP_API_UPDATE} \
-    -e WATCHTOWER_HTTP_API_TOKEN=${WATCHTOWER_HTTP_API_TOKEN} \
-    -e WATCHTOWER_NO_RESTART=${WATCHTOWER_NO_RESTART} \
-    -e WATCHTOWER_DEBUG=${WATCHTOWER_DEBUG} \
+    --env-file=/home/admin/.config/systemd/user/watchtower.env \
     --net pmm_default \
     --cap-add=net_admin,net_raw \
-    -p 8080:8080/tcp docker.io/perconalab/watchtower
+    docker.io/perconalab/watchtower
 
 ExecStop=/usr/bin/podman stop -t 10 %N
 

docker-compose.yml

@@ -25,7 +25,11 @@ services:
       - PMM_WATCHTOWER_HOST=${PMM_WATCHTOWER_HOST:-http://watchtower:8080}
       - PMM_WATCHTOWER_TOKEN=${PMM_WATCHTOWER_TOKEN:-INSECURE_TOKEN}
       - PMM_RELEASE_VERSION=3.0.0-alpha
+      # - PMM_DISTRIBUTION_METHOD=${PMM_DISTRIBUTION_METHOD:-docker}
+      - PMM_DEV_UPDATE_DOCKER_IMAGE=${PMM_DEV_UPDATE_DOCKER_IMAGE:-}
       # - PMM_DEV_VERSION_SERVICE_URL=http://localhost:11000
+      # - PMM_DEV_PERCONA_PLATFORM_ADDRESS=https://check.localhost
+      # - PMM_DEV_PERCONA_PLATFORM_INSECURE=1
       # - PMM_DEV_PERCONA_PLATFORM_PUBLIC_KEY=<public key>
       # - PMM_DEV_TELEMETRY_INTERVAL=10s
       # - PMM_DEV_TELEMETRY_DISABLE_START_DELAY=1
@@ -80,6 +84,7 @@ services:
     volumes:
       - ./:/root/go/src/github.com/percona/pmm
       - ./Makefile.devcontainer:/root/go/src/github.com/percona/pmm/Makefile:ro # substitute Makefile in devcontainer
+      - ./managed/testdata/updater/:/home/pmm/.config/systemd/user/
       # caching
       - go-modules:/root/go/pkg/mod
       - root-cache:/root/.cache
@@ -103,6 +108,7 @@ services:
         - WATCHTOWER_HTTP_LISTEN_PORT=8080
         - WATCHTOWER_HTTP_API_UPDATE=1
         - WATCHTOWER_HTTP_API_TOKEN=${PMM_WATCHTOWER_TOKEN:-INSECURE_TOKEN}
+        - WATCHTOWER_NO_RESTART=${WATCHTOWER_NO_RESTART:-0}
     hostname: watchtower
     networks:
       - ${NETWORK:-default}

managed/services/server/updater.go

@@ -46,6 +46,7 @@ const (
 	updateCheckInterval          = 24 * time.Hour
 	updateCheckResultFresh       = updateCheckInterval + 10*time.Minute
 	updateDefaultTimeout         = 30 * time.Second
+	envfilePath                  = "/home/pmm/update/pmm-server.env"
 )
 
 var fileName = "/etc/pmm-server-update-version.json"
@@ -173,6 +174,19 @@ func (up *Updater) StartUpdate(ctx context.Context, newImageName string) error {
 		return grpcstatus.Errorf(codes.FailedPrecondition, "failed to check watchtower host")
 	}
 
+	if _, e := os.Stat(envfilePath); e == nil {
+		err := up.updatePodmanEnvironmentVariables(envfilePath, newImageName)
+		if err != nil {
+			up.running = false
+			up.l.WithError(err).Error("Failed to update environment variables file")
+			return errors.Wrap(err, "failed to update environment variables file")
+		}
+	} else if !os.IsNotExist(e) {
+		up.running = false
+		up.l.WithError(e).Error("Failed to check environment variables file")
+		return errors.Wrap(e, "failed to check environment variables file")
+	}
+
 	if err := up.sendRequestToWatchtower(ctx, newImageName); err != nil {
 		up.running = false
 		up.l.WithError(err).Error("Failed to trigger update")
@@ -475,6 +489,27 @@ func (up *Updater) checkWatchtowerHost() error {
 	return nil
 }
 
+func (up *Updater) updatePodmanEnvironmentVariables(filename string, name string) error {
+	if len(strings.Split(name, "/")) < 3 {
+		name = "docker.io/" + name
+	}
+	file, err := os.ReadFile(filename)
+	if err != nil {
+		return errors.Wrap(err, "failed to read file")
+	}
+	lines := strings.Split(string(file), "\n")
+	for i, line := range lines {
+		if strings.Contains(line, "PMM_IMAGE") {
+			lines[i] = fmt.Sprintf("PMM_IMAGE=%s", name)
+		}
+	}
+	err = os.WriteFile(filename, []byte(strings.Join(lines, "\n")), 0o644)
+	if err != nil {
+		return errors.Wrap(err, "failed to write file")
+	}
+	return nil
+}
+
 func isHostAvailable(host string, port string, timeout time.Duration) bool {
 	conn, err := net.DialTimeout("tcp", net.JoinHostPort(host, port), timeout)
 	if err != nil {

managed/services/server/updater_test.go

@@ -35,6 +35,7 @@ import (
 func TestUpdater(t *testing.T) {
 	gRPCMessageMaxSize := uint32(100 * 1024 * 1024)
 	watchtowerURL, _ := url.Parse("http://watchtower:8080")
+	const tmpDistributionFile = "/tmp/distribution"
 
 	t.Run("TestNextVersion", func(t *testing.T) {
 		type args struct {
@@ -292,4 +293,26 @@ func TestUpdater(t *testing.T) {
 		assert.Equal(t, "2.41.1", latest.DockerImage)
 		assert.Equal(t, time.Date(2024, 3, 20, 15, 48, 7, 145620000, time.UTC), latest.BuildTime)
 	})
+
+	t.Run("TestUpdateEnvFile", func(t *testing.T) {
+		u := NewUpdater(watchtowerURL, gRPCMessageMaxSize)
+		tmpFile := filepath.Join(os.TempDir(), "pmm-service.env")
+		content := `PMM_WATCHTOWER_HOST=http://watchtower:8080
+PMM_WATCHTOWER_TOKEN=123
+PMM_SERVER_UPDATE_VERSION=docker.io/perconalab/pmm-server:3-dev-container
+PMM_IMAGE=docker.io/perconalab/pmm-server:3-dev-latest
+PMM_DISTRIBUTION_METHOD=ami`
+		err := os.WriteFile(tmpFile, []byte(content), 0o644)
+		require.NoError(t, err)
+
+		err = u.updatePodmanEnvironmentVariables(tmpFile, "perconalab/pmm-server:3-dev-container")
+		require.NoError(t, err)
+		newContent, err := os.ReadFile(tmpFile)
+		require.NoError(t, err)
+		assert.Equal(t, `PMM_WATCHTOWER_HOST=http://watchtower:8080
+PMM_WATCHTOWER_TOKEN=123
+PMM_SERVER_UPDATE_VERSION=docker.io/perconalab/pmm-server:3-dev-container
+PMM_IMAGE=docker.io/perconalab/pmm-server:3-dev-container
+PMM_DISTRIBUTION_METHOD=ami`, string(newContent))
+	})
 }

managed/testdata/updater/pmm-server.env

@@ -0,0 +1,4 @@
+PMM_WATCHTOWER_HOST=http://watchtower:8080
+PMM_WATCHTOWER_TOKEN=123
+PMM_IMAGE=docker.io/perconalab/pmm-server:3-dev-latest
+PMM_DISTRIBUTION_METHOD=ami

ui/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "ESLINT_USE_FLAT_CONFIG=false eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "format": "prettier .  --write",
     "preview": "vite preview",
     "test": "vitest run",
@@ -15,13 +15,16 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@fontsource/poppins": "^5.0.15",
+    "@fontsource/roboto": "^5.0.14",
+    "@fontsource/roboto-mono": "^5.0.18",
     "@mui/icons-material": "^5.15.18",
     "@mui/material": "^5.15.18",
     "@mui/x-date-pickers": "^7.5.0",
     "@percona/design": "^1.0.0",
     "@percona/ui-lib": "^1.0.0",
     "@tanstack/react-query": "^5.45.1",
-    "axios": "^1.7.0",
+    "axios": "^1.7.4",
     "axios-case-converter": "^1.1.1",
     "date-fns": "^2.30.0",
     "react": "^18.3.1",
@@ -32,23 +35,27 @@
     "@percona/eslint-config-react": "^1.0.0",
     "@percona/prettier-config": "^1.0.0",
     "@percona/tsconfig": "^1.0.0",
-    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^15.0.7",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.9.0",
     "@typescript-eslint/parser": "^7.9.0",
-    "@vitejs/plugin-react-swc": "^3.6.0",
-    "eslint": "^9.3.0",
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
-    "jsdom": "^24.0.0",
+    "jsdom": "^24.1.1",
     "prettier": "^3.2.5",
     "typescript": "^5.4.5",
-    "vite": "^5.2.11",
+    "vite": "^5.3.5",
     "vite-tsconfig-paths": "^4.3.2",
-    "vitest": "^1.6.0"
+    "vitest": "^2.0.5"
+  },
+  "resolutions": {
+    "braces": "^3.0.3",
+    "vite": "^5.3.5"
   },
   "prettier": "@percona/prettier-config"
-}
+}

ui/pmm-dev.conf

@@ -16,5 +16,8 @@ server {
     proxy_http_version 1.1;
     proxy_set_header Upgrade $http_upgrade;
     proxy_set_header Connection "upgrade";
+
+    # duplicate so http_host is correctly set
+    rewrite ^/$ $scheme://$http_host/graph/;
   }
 }

ui/src/App.tsx

@@ -8,7 +8,8 @@ import { NotistackMuiSnackbar } from '@percona/ui-lib';
 import { SnackbarProvider } from 'notistack';
 import pmmThemeOptions from 'themes/PmmTheme';
 import { AuthProvider } from 'contexts/auth';
-import { UserProvider } from 'contexts/user/user.provider';
+import { UserProvider } from 'contexts/user';
+import { UpdatesProvider } from 'contexts/updates';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -39,7 +40,9 @@ const App = () => (
         <QueryClientProvider client={queryClient}>
           <AuthProvider>
             <UserProvider>
-              <RouterProvider router={router} />
+              <UpdatesProvider>
+                <RouterProvider router={router} />
+              </UpdatesProvider>
             </UserProvider>
           </AuthProvider>
         </QueryClientProvider>

ui/src/api/__mocks__/agents.ts

@@ -0,0 +1,10 @@
+import { AgentUpdateSeverity, GetAgentVersionItem } from 'types/agent.types';
+
+export const getAgentVersions = async (): Promise<GetAgentVersionItem[]> => [
+  {
+    agentId: 'pmm-server',
+    version: '3.0.0',
+    nodeName: 'pmm-server',
+    severity: AgentUpdateSeverity.UP_TO_DATE,
+  },
+];

ui/src/api/agents.ts

@@ -0,0 +1,9 @@
+import { GetAgentVersionsResponse } from 'types/agent.types';
+import { api } from './api';
+
+export const getAgentVersions = async () => {
+  const res = await api.get<GetAgentVersionsResponse>(
+    '/management/agents/versions'
+  );
+  return res.data.agentVersions;
+};

ui/src/api/ready.ts

@@ -0,0 +1,6 @@
+import { api } from './api';
+
+export const getReadiness = async () => {
+  const res = await api.get<Record<string, never>>('/server/readyz');
+  return res.data;
+};

ui/src/api/updates.ts

@@ -4,6 +4,7 @@ import {
   GetUpdateStatusResponse,
   GetUpdatesParams,
   GetUpdatesResponse,
+  StartUpdateBody,
   StartUpdateResponse,
 } from 'types/updates.types';
 import { api } from './api';
@@ -17,11 +18,11 @@ export const checkForUpdates = async (
   return res.data;
 };
 
-export const startUpdate = async () => {
-  const res = await api.post<object, AxiosResponse<StartUpdateResponse>>(
-    '/server/updates:start',
-    {}
-  );
+export const startUpdate = async (body: StartUpdateBody) => {
+  const res = await api.post<
+    StartUpdateBody,
+    AxiosResponse<StartUpdateResponse>
+  >('/server/updates:start', body);
   return res.data;
 };
 

ui/src/components/app-bar/AppBar.tsx

@@ -8,26 +8,26 @@ import {
 } from '@mui/material';
 import { HelpFilledIcon, PmmRoundedIcon } from 'icons';
 import { Breadcrumbs } from 'components/breadcrumbs';
-import { PMM_HOME_URL, PMM_SUPPORT_URL } from 'constants';
+import { PMM_SUPPORT_URL } from 'constants';
 import { Messages } from './AppBar.messages';
+import { HomeLink } from 'components/home-link';
 
 export const AppBar = () => (
-  <MuiAppBar position="static" color="primary">
+  <MuiAppBar position="sticky" color="primary">
     <Toolbar>
-      <Link
-        href={PMM_HOME_URL}
+      <HomeLink
         color="inherit"
         underline="hover"
-        sx={(theme) => ({
-          marginRight: theme.spacing(2),
-        })}
+        sx={{
+          mr: 2,
+        }}
         data-testid="appbar-pmm-link"
       >
         <Stack gap={1} direction="row" alignItems="center">
           <PmmRoundedIcon sx={{ height: '40px', width: 'auto' }} />
           <Typography>{Messages.title}</Typography>
         </Stack>
-      </Link>
+      </HomeLink>
       <Breadcrumbs />
       <Box sx={{ ml: 'auto' }}>
         <Link

ui/src/components/breadcrumbs/Breadcrumbs.tsx

@@ -7,8 +7,8 @@ import {
 } from '@mui/material';
 import { Link as RouterLink } from 'react-router-dom';
 import { KeyboardArrowRight } from '@mui/icons-material';
-import { PMM_HOME_URL } from 'constants';
 import { Messages } from './Breadcrumbs.messages';
+import { HomeLink } from 'components/home-link';
 
 export const Breadcrumbs: FC = () => {
   const theme = useTheme();
@@ -19,9 +19,9 @@ export const Breadcrumbs: FC = () => {
       color="text"
       separator={<KeyboardArrowRight fontSize="small" />}
     >
-      <Link underline="hover" color="inherit" href={PMM_HOME_URL}>
+      <HomeLink underline="hover" color="inherit">
         {Messages.home}
-      </Link>
+      </HomeLink>
       <Link
         underline="hover"
         component={RouterLink}

ui/src/components/footer/Footer.messages.ts

@@ -0,0 +1,5 @@
+export const Messages = {
+  version: (version: string) => `PMM ${version}`,
+  inProgress: 'Update in progress...',
+  checkedOn: (date: string) => `Checked on: ${date}`,
+};