A beautiful GitOps day XI - Load testing & Frontend

1
apiVersion: v1
2
kind: ConfigMap
3
metadata:
4
  name: scenario
5
  namespace: kuberocks
6
data:
7
  script.js: |
8
    import http from "k6/http";
9
    import { check } from "k6";
10

11
    export default function () {
12
      const size = 10;
13
      let page = 1;
14

15
      let articles = []
16

17
      do {
18
        const res = http.get(`${__ENV.API_URL}/Articles?page=${page}&size=${size}`);
19
        check(res, {
20
          "status is 200": (r) => r.status == 200,
21
        });
22

23
        articles = res.json().articles;
24
        page++;
25

26
        articles.forEach((article) => {
27
          const res = http.get(`${__ENV.API_URL}/Articles/${article.slug}`);
28
          check(res, {
29
            "status is 200": (r) => r.status == 200,
30
          });
31
        });
32
      }
33
      while (articles.length > 0);
34
    }

1
#...
2
---
3
apiVersion: batch/v1
4
kind: Job
5
metadata:
6
  name: k6
7
  namespace: kuberocks
8
spec:
9
  ttlSecondsAfterFinished: 0
10
  template:
11
    spec:
12
      restartPolicy: Never
13
      containers:
14
        - name: run
15
          image: grafana/k6
16
          env:
17
            - name: API_URL
18
              value: https://demo.kube.rocks/api
19
            - name: K6_VUS
20
              value: "30"
21
            - name: K6_DURATION
22
              value: 1m
23
            - name: K6_PROMETHEUS_RW_SERVER_URL
24
              value: http://prometheus-operated.monitoring:9090/api/v1/write
25
          command:
26
            ["k6", "run", "-o", "experimental-prometheus-rw", "script.js"]
27
          volumeMounts:
28
            - name: scenario
29
              mountPath: /home/k6
30
      tolerations:
31
        - key: node-role.kubernetes.io/runner
32
          operator: Exists
33
          effect: NoSchedule
34
      nodeSelector:
35
        node-role.kubernetes.io/runner: "true"
36
      volumes:
37
        - name: scenario
38
          configMap:
39
            name: scenario

1
namespace KubeRocks.Application.Contexts;
2

3
using KubeRocks.Application.Entities;
4

5
using Microsoft.EntityFrameworkCore;
6

7
public class AppRoDbContext : DbContext
8
{
9
    public DbSet<User> Users => Set<User>();
10
    public DbSet<Article> Articles => Set<Article>();
11
    public DbSet<Comment> Comments => Set<Comment>();
12

13
    public AppRoDbContext(DbContextOptions<AppRoDbContext> options) : base(options)
14
    {
15
    }
16
}

1
public static class ServiceExtensions
2
{
3
    public static IServiceCollection AddKubeRocksServices(this IServiceCollection services, IConfiguration configuration)
4
    {
5
        return services
6
            //...
7
            .AddDbContext<AppRoDbContext>((options) =>
8
            {
9
                options.UseNpgsql(
10
                    configuration.GetConnectionString("DefaultRoConnection")
11
                    ??
12
                    configuration.GetConnectionString("DefaultConnection")
13
                );
14
            });
15
    }
16
}

1
//...
2

3
public class ArticlesController
4
{
5
    private readonly AppRoDbContext _context;
6

7
    //...
8

9
    public ArticlesController(AppRoDbContext context)
10
    {
11
        _context = context;
12
    }
13

14
    //...
15
}

1
# ...
2
spec:
3
  # ...
4
  template:
5
    # ...
6
    spec:
7
      # ...
8
      containers:
9
        - name: api
10
          # ...
11
          env:
12
            - name: DB_PASSWORD
13
              valueFrom:
14
                secretKeyRef:
15
                  name: demo-db
16
                  key: password
17
            - name: ConnectionStrings__DefaultConnection
18
              value: Host=postgresql-primary.postgres;Username=demo;Password='$(DB_PASSWORD)';Database=demo;
19
            - name: ConnectionStrings__DefaultRoConnection
20
              value: Host=postgresql-primary.postgres,postgresql-read.postgres;Username=demo;Password='$(DB_PASSWORD)';Database=demo;Load Balance Hosts=true;
21
#...

1
{
2
  //...
3
  "profiles": {
4
    "http": {
5
      //...
6
      "applicationUrl": "http://localhost:5000",
7
      //...
8
    },
9
    "https": {
10
      //...
11
      "applicationUrl": "https://localhost:5001;http://localhost:5000",
12
      //...
13
    },
14
    //...
15
  }
16
}

1
//...
2

3
var builder = WebApplication.CreateBuilder(args);
4

5
builder.Services.AddReverseProxy()
6
    .LoadFromConfig(builder.Configuration.GetSection("ReverseProxy"));
7

8
//...
9

10
var app = builder.Build();
11

12
app.MapReverseProxy();
13

14
//...
15

16
app.UseRouting();
17

18
//...

1
{
2
  //...
3
  "ReverseProxy": {
4
    "Routes": {
5
      "ServerRouteApi": {
6
        "ClusterId": "Server",
7
        "Match": {
8
          "Path": "/api/{**catch-all}"
9
        },
10
        "Transforms": [
11
          {
12
            "PathRemovePrefix": "/api"
13
          }
14
        ]
15
      },
16
      "ClientRoute": {
17
        "ClusterId": "Client",
18
        "Match": {
19
          "Path": "{**catch-all}"
20
        }
21
      }
22
    },
23
    "Clusters": {
24
      "Client": {
25
        "Destinations": {
26
          "Client1": {
27
            "Address": "http://localhost:3333"
28
          }
29
        }
30
      },
31
      "Server": {
32
        "Destinations": {
33
          "Server1": {
34
            "Address": "https://localhost:5001"
35
          }
36
        }
37
      }
38
    }
39
  }
40
}

1
using Microsoft.OpenApi.Models;
2

3
using Swashbuckle.AspNetCore.SwaggerGen;
4

5
namespace KubeRocks.WebApi.Filters;
6

7
public class RequiredNotNullableSchemaFilter : ISchemaFilter
8
{
9
    public void Apply(OpenApiSchema schema, SchemaFilterContext context)
10
    {
11
        if (schema.Properties is null)
12
        {
13
            return;
14
        }
15

16
        var notNullableProperties = schema
17
            .Properties
18
            .Where(x => !x.Value.Nullable && !schema.Required.Contains(x.Key))
19
            .ToList();
20

21
        foreach (var property in notNullableProperties)
22
        {
23
            schema.Required.Add(property.Key);
24
        }
25
    }
26
}

1
//...
2

3
builder.Services.AddSwaggerGen(o =>
4
{
5
    o.SupportNonNullableReferenceTypes();
6
    o.SchemaFilter<RequiredNotNullableSchemaFilter>();
7
});
8

9
//...

1
{
2
  //...
3
  "scripts": {
4
    //...
5
    "openapi": "openapi-typescript http://localhost:5000/api/v1/swagger.json --output src/api/openapi.ts"
6
  },
7
  //...
8
}

1
import { Fetcher } from 'openapi-typescript-fetch'
2

3
import type { components, paths } from './openapi'
4

5
const fetcher = Fetcher.for<paths>()
6

7
type ArticleList = components['schemas']['ArticleListDto']
8
type Article = components['schemas']['ArticleDto']
9

10
const getArticles = fetcher.path('/api/Articles').method('get').create()
11
const getArticleBySlug = fetcher.path('/api/Articles/{slug}').method('get').create()
12

13
export type { Article, ArticleList }
14
export {
15
  getArticles,
16
  getArticleBySlug,
17
}

1
<script lang="ts" setup>
2
import { getArticles } from '~/api'
3
import type { ArticleList } from '~/api'
4

5
const articles = ref<ArticleList[]>([])
6
const articlesCount = ref<number>(0)
7

8
const page = ref<number>(1)
9
const size = ref<number>(10)
10

11
async function loadArticles() {
12
  const { data } = await getArticles({
13
    page: page.value,
14
    size: size.value,
15
  })
16

17
  articles.value = data.articles
18
  articlesCount.value = data.articlesCount
19
}
20

21
function fetchDataOnPage({ currentPage }: { currentPage: number }) {
22
  page.value = currentPage
23
  loadArticles()
24
}
25

26
loadArticles()
27
</script>
28

29
<template>
30
  <div inline-flex flex-col gap-4>
31
    <RouterLink
32
      v-for="(article, i) in articles"
33
      :key="i"
34
      :to="`/articles/${article.slug}`"
35
      inline-block border-1 border-purple-500 rounded p-4
36
    >
37
      <h3>{{ article.title }}</h3>
38
    </RouterLink>
39
  </div>
40

41
  <div mt-4 flex justify-center>
42
    <OffsetPagination
43
      :page="page"
44
      :size="size"
45
      :total="articlesCount"
46
      :fetch-data="fetchDataOnPage"
47
    />
48
  </div>
49
</template>

1
<script lang="ts" setup>
2
const props = defineProps<{
3
  total: number
4
  size: number
5
  page: number
6
  fetchData: ({ currentPage }: { currentPage: number }) => Promise<void> | void
7
}>()
8

9
const pagination = computed(() =>
10
  useOffsetPagination({
11
    total: props.total,
12
    page: props.page,
13
    pageSize: props.size,
14
    onPageChange: props.fetchData,
15
    onPageSizeChange: props.fetchData,
16
  }),
17
)
18

19
function usePagesBuilder(currentPage: number, pageCount: number) {
20
  const pages = []
21
  const maxPages = 5
22
  const half = Math.floor(maxPages / 2)
23
  const start = Math.max(currentPage - half, 1)
24
  const end = Math.min(start + maxPages, pageCount)
25

26
  for (let i = start; i <= end; i++)
27
    pages.push(i)
28

29
  if (start > 1) {
30
    pages.unshift('...')
31
    pages.unshift(1)
32
  }
33

34
  if (end < pageCount) {
35
    pages.push('...')
36
    pages.push(pageCount)
37
  }
38

39
  return pages
40
}
41

42
const classes
43
  = 'flex items-center justify-center border rounded-1 text-sm font-sans text-gray-300 border-gray-500 w-8 h-8'
44
</script>
45

46
<template>
47
  <div flex flex-wrap gap-1>
48
    <button
49
      :disabled="pagination.isFirstPage.value"
50
      :class="[
51
        classes,
52
        {
53
          'opacity-50': pagination.isFirstPage.value,
54
        },
55
      ]"
56
      @click="pagination.prev"
57
    >
58
      &lt;
59
    </button>
60
    <button
61
      v-for="item in usePagesBuilder(
62
        pagination.currentPage.value,
63
        pagination.pageCount.value,
64
      )"
65
      :key="item"
66
      :disabled="
67
        pagination.currentPage.value === item || !Number.isInteger(item)
68
      "
69
      :class="[
70
        classes,
71
        {
72
          'opacity-50': !Number.isInteger(item),
73
          'text-white border-purple-500 bg-purple-500':
74
            pagination.currentPage.value === item,
75
        },
76
      ]"
77
      @click="pagination.currentPage.value = Number(item)"
78
    >
79
      {{ item }}
80
    </button>
81
    <button
82
      :disabled="pagination.isLastPage.value"
83
      :class="[
84
        classes,
85
        {
86
          'opacity-50': pagination.isLastPage.value,
87
        },
88
      ]"
89
      @click="pagination.next"
90
    >
91
      &gt;
92
    </button>
93
  </div>
94
</template>

1
<script lang="ts" setup>
2
import { getArticleBySlug } from '~/api'
3
import type { Article } from '~/api'
4

5
const props = defineProps<{ slug: string }>()
6

7
const article = ref<Article>()
8

9
const router = useRouter()
10

11
async function getArticle() {
12
  const { data } = await getArticleBySlug({ slug: props.slug })
13

14
  article.value = data
15
}
16

17
getArticle()
18
</script>
19

20
<template>
21
  <div v-if="article">
22
    <h1 mb-6 text-2xl font-bold>
23
      {{ article.title }}
24
    </h1>
25
    <p mb-4 italic>
26
      {{ article.description }}
27
    </p>
28
    <div prose v-html="article.body" />
29
    <div>
30
      <button m-3 mt-8 text-sm btn @click="router.back()">
31
        Back
32
      </button>
33
    </div>
34
  </div>
35
</template>

1
resources:
2
  - name: version
3
    type: semver
4
    source:
5
      driver: git
6
      uri: ((git.url))/kuberocks/demo-ui
7
      branch: main
8
      file: version
9
      username: ((git.username))
10
      password: ((git.password))
11
      git_user: ((git.git-user))
12
      commit_message: ((git.commit-message))
13
  - name: source-code
14
    type: git
15
    icon: coffee
16
    source:
17
      uri: ((git.url))/kuberocks/demo-ui
18
      branch: main
19
      username: ((git.username))
20
      password: ((git.password))
21
  - name: docker-image
22
    type: registry-image
23
    icon: docker
24
    source:
25
      repository: ((registry.name))/kuberocks/demo-ui
26
      tag: latest
27
      username: ((registry.username))
28
      password: ((registry.password))
29

30
jobs:
31
  - name: build
32
    plan:
33
      - get: source-code
34
        trigger: true
35

36
      - task: build-source
37
        config:
38
          platform: linux
39
          image_resource:
40
            type: registry-image
41
            source:
42
              repository: node
43
              tag: 18-buster
44
          inputs:
45
            - name: source-code
46
              path: .
47
          outputs:
48
            - name: dist
49
              path: dist
50
          caches:
51
            - path: .pnpm-store
52
          run:
53
            path: /bin/sh
54
            args:
55
              - -ec
56
              - |
57
                corepack enable
58
                corepack prepare pnpm@latest-8 --activate
59
                pnpm config set store-dir .pnpm-store
60
                pnpm i
61
                pnpm lint
62
                pnpm build
63

64
      - task: build-image
65
        privileged: true
66
        config:
67
          platform: linux
68
          image_resource:
69
            type: registry-image
70
            source:
71
              repository: concourse/oci-build-task
72
          inputs:
73
            - name: source-code
74
              path: .
75
            - name: dist
76
              path: dist
77
          outputs:
78
            - name: image
79
          run:
80
            path: build
81
      - put: version
82
        params: { bump: patch }
83
      - put: docker-image
84
        params:
85
          additional_tags: version/number
86
          image: image/image.tar

1
#...
2

3
jobs:
4
  - name: configure-pipelines
5
    plan:
6
      #...
7
      - set_pipeline: demo-ui
8
        file: ci/pipelines/demo-ui.yaml

1
server {
2
    listen       80;
3
    server_name  localhost;
4

5
    root /usr/share/nginx/html;
6

7
    location / {
8
        try_files $uri /index.html;
9
    }
10
}

1
FROM nginx:alpine
2

3
COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
4
COPY dist /usr/share/nginx/html

1
apiVersion: image.toolkit.fluxcd.io/v1beta2
2
kind: ImageRepository
3
metadata:
4
  name: demo-ui
5
  namespace: flux-system
6
spec:
7
  image: gitea.kube.rocks/kuberocks/demo-ui
8
  interval: 1m0s
9
  secretRef:
10
    name: dockerconfigjson
11
---
12
apiVersion: image.toolkit.fluxcd.io/v1beta2
13
kind: ImagePolicy
14
metadata:
15
  name: demo-ui
16
  namespace: flux-system
17
spec:
18
  imageRepositoryRef:
19
    name: demo-ui
20
    namespace: flux-system
21
  policy:
22
    semver:
23
      range: 0.0.x

1
apiVersion: apps/v1
2
kind: Deployment
3
metadata:
4
  name: demo-ui
5
  namespace: kuberocks
6
spec:
7
  replicas: 2
8
  selector:
9
    matchLabels:
10
      app: demo-ui
11
  template:
12
    metadata:
13
      labels:
14
        app: demo-ui
15
    spec:
16
      imagePullSecrets:
17
        - name: dockerconfigjson
18
      containers:
19
        - name: front
20
          image: gitea.kube.rocks/kuberocks/demo-ui:latest # {"$imagepolicy": "flux-system:image-demo-ui"}
21
          ports:
22
            - containerPort: 80
23
---
24
apiVersion: v1
25
kind: Service
26
metadata:
27
  name: demo-ui
28
  namespace: kuberocks
29
spec:
30
  selector:
31
    app: demo-ui
32
  ports:
33
    - name: http
34
      port: 80

1
#...
2
apiVersion: traefik.io/v1alpha1
3
kind: IngressRoute
4
#...
5
spec:
6
  #...
7
  routes:
8
    - match: Host(`demo.kube.rocks`)
9
      kind: Rule
10
      services:
11
        - name: demo-ui
12
          port: http
13
    - match: Host(`demo.kube.rocks`) && PathPrefix(`/api`)
14
      #...