Merge pull request #42 from kyasbal/update-frontend-dependency

Update frontend dependencies

.gitignore

@@ -9,5 +9,3 @@ go-cover.output
 .envrc
 *.khi
 .terraform/
-
-oss

.node-version

@@ -1 +1 @@
-18.19.0
+22.13.1

README.ja.md

@@ -83,7 +83,7 @@ Kubernetes History Inspector (KHI) は、Kubernetesクラスタのログ可視
 
 #### 動作環境
 - Go 1.23.*
-- Node.js環境 18.19.*
+- Node.js環境 22.13.*
 - [`gcloud` CLI](https://cloud.google.com/sdk/docs/install)
 - Google Chrome (最新版)
 

README.md

@@ -88,7 +88,7 @@ For more details, please try [Getting started](./docs/en/getting-started.md).
 
 #### Prerequisites
 - Go 1.23.*
-- Node.js environment 18.19.*
+- Node.js environment 22.13.*
 - [`gcloud` CLI](https://cloud.google.com/sdk/docs/install)
 
 #### Initialization (one-time setup)

scripts/frontend-codegen/templates/generated.sass.gtpl

@@ -1,5 +1,6 @@
 // This file is generated by ./scripts/logtype-generator; DO NOT EDIT.
 @use "sass:map"
+@use "sass:color"
 
 @mixin parent-relationship-label-styles{{range $key,$value := .ParentRelationships}}{{if $value.Visible }}
     &.{{$value.Label}}
@@ -11,11 +12,11 @@ $color-{{$type.Label}}: {{$type.LabelBackgroundColor}}{{end}}
 
 @mixin log-type-shape-colors($log-type-name,$log-type-color,$border-width)
     &.#{$log-type-name}
-        background-color: lighten($log-type-color,0%)
+        background-color: color.adjust($log-type-color, $lightness: 0%)
         &.highlight
-            background-color: darken($log-type-color, 10%)
+            background-color: color.adjust($log-type-color,$lightness: -10%)
         &.selected
-            background-color: darken($log-type-color, 20%)
+            background-color: color.adjust($log-type-color,$lightness: -20%)
         &.dim
             background-color: lightgray
 

scripts/generate-angular-json.sh

@@ -24,10 +24,10 @@ PROD_ENV_NAMES=$(echo $PROD_ENV_FILES| jq -R -s -c '[split(" ")[]|capture(".web/
 DEV_ENV_NAMES=$(echo $DEV_ENV_FILES| jq -R -s -c '[split(" ")[]|capture(".web/src/environments/environment.(?<env>.*).ts")|.env]')
 ALL_ENV_NAMES=$(echo $ALL_ENV_FILES| jq -R -s -c '[split(" ")[]|capture(".web/src/environments/environment.(?<env>.*).ts")|.env]')
 
-PROD_BUILD_CONFIGURATIONS=$(echo $PROD_ENV_NAMES | jq '[.[]|{(.):{"outputHashing":"all","fileReplacements":[{"replace":"src/environments/environment.ts","with":("src/environments/environment." + . +".ts")}]}}]|add')
-DEV_BUILD_CONFIGURATIONS=$(echo $DEV_ENV_NAMES |jq '[.[]|{(.):{"buildOptimizer":false,"optimization":false,"vendorChunk":true,"extractLicenses":false,"sourceMap":true,"namedChunks":true,"fileReplacements":[{"replace":"src/environments/environment.ts","with":("src/environments/environment." + . +".ts")}]}}]|add')
+PROD_BUILD_CONFIGURATIONS=$(echo $PROD_ENV_NAMES | jq '[.[]|{(.):{"outputHashing":"all","fileReplacements":[{"replace":"src/environments/environment.ts","with":("src/environments/environment." + . +".ts")},{"replace":"src/environments/version.ts","with":("src/environments/version." + . +".ts")}]}}]|add')
+DEV_BUILD_CONFIGURATIONS=$(echo $DEV_ENV_NAMES |jq '[.[]|{(.):{"buildOptimizer":false,"optimization":false,"vendorChunk":true,"extractLicenses":false,"sourceMap":true,"namedChunks":true,"fileReplacements":[{"replace":"src/environments/environment.ts","with":("src/environments/environment." + . +".ts")},{"replace":"src/environments/version.ts","with":("src/environments/version." + . +".ts")}]}}]|add')
 
 BUILD_CONFIGURATIONS=$(echo "$PROD_BUILD_CONFIGURATIONS$DEV_BUILD_CONFIGURATIONS" | jq -s add)
-SERVE_CONFIGURATIONS=$(echo $ALL_ENV_NAMES| jq '[.[]|{(.):{"browserTarget":("frontend:build:" + .)}}]|add')
+SERVE_CONFIGURATIONS=$(echo $ALL_ENV_NAMES| jq '[.[]|{(.):{"buildTarget":("frontend:build:" + .)}}]|add')
 
 echo $(cat $ANGULAR_TEMPLATE)$BUILD_CONFIGURATIONS$SERVE_CONFIGURATIONS | jq -s '.[0].projects.frontend.architect.build.configurations=.[1]|.[0].projects.frontend.architect.serve.configurations=.[2]|.[0]'

scripts/generate-version.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+# Copyright 2025 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+
+echo "export const VERSION=\"$(cat VERSION)\"" >> ./web/src/environments/version.prod.ts
+echo "export const VERSION=\"$(cat VERSION)@$(git log -1 --pretty=format:%h )\"" >> ./web/src/environments/version.dev.ts

scripts/make/codegen.mk

@@ -4,7 +4,7 @@
 # prepare-frontend make task generates source code or configurations needed for building frontend code.
 # This task needs to be set as a dependency of any make tasks using frontend code.
 .PHONY=prepare-frontend
-prepare-frontend: web/angular.json web/src/app/generated.sass web/src/app/generated.ts
+prepare-frontend: web/angular.json web/src/app/generated.sass web/src/app/generated.ts web/src/environments/version.*.ts
 
 web/angular.json: scripts/generate-angular-json.sh web/angular-template.json web/src/environments/environment.*.ts
 	./scripts/generate-angular-json.sh > ./web/angular.json
@@ -13,6 +13,10 @@ web/angular.json: scripts/generate-angular-json.sh web/angular-template.json web
 web/src/app/generated.sass web/src/app/generated.ts: pkg/model/enum/log_type.go pkg/model/enum/parent_relationship.go pkg/model/enum/revision_state.go pkg/model/enum/severity.go pkg/model/enum/verb.go 
 	go run ./scripts/frontend-codegen
 
+# Generate web/src/environments/version.dev.ts and web/src/environments/version.prod.ts
+web/src/environments/version.*.ts: VERSION
+	./scripts/generate-version.sh
+
 .PHONY=add-licenses
 add-licenses:
 	$(GOPATH)/bin/addlicense  -c "Google LLC" -l apache .

scripts/make/lint.mk

@@ -1,6 +1,6 @@
 .PHONY=lint-web
 lint-web: prepare-frontend
-	cd web && npx ng lint && npx stylelint "*/**.sass"
+	cd web && npx ng lint
 
 .PHONY=lint-go
 lint-go:

web/.gitignore

@@ -43,4 +43,5 @@ Thumbs.db
 
 # Ignore generated files
 src/app/generated.*
-angular.json
+angular.json
+src/environments/version.*.ts

web/angular-template.json

@@ -15,7 +15,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@ngx-env/builder:browser",
+          "builder": "@angular-devkit/build-angular:browser",
           "options": {
             "outputPath": "dist/frontend",
             "index": "src/index.html",
@@ -36,18 +36,18 @@
           "defaultConfiguration": "prod-oss"
         },
         "serve": {
-          "builder": "@ngx-env/builder:dev-server",
+          "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {},
           "defaultConfiguration": "dev-oss"
         },
         "extract-i18n": {
-          "builder": "@ngx-env/builder:extract-i18n",
+          "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "frontend:build"
+            "buildTarget": "frontend:build"
           }
         },
         "test": {
-          "builder": "@ngx-env/builder:karma",
+          "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",