This is an automated email from the ASF dual-hosted git repository.
wu-sheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-horizon-ui.git
The following commit(s) were added to refs/heads/main by this push:
new 17edd80 ui: small cleanup — remove SWIP-14 label + dead
placeholderTabs + empty CSS
17edd80 is described below
commit 17edd80ba1cc9d969295d7727d4ef27b5c94e5ac
Author: Wu Sheng <[email protected]>
AuthorDate: Tue May 19 20:40:16 2026 +0800
ui: small cleanup — remove SWIP-14 label + dead placeholderTabs + empty CSS
- InspectView: drop the visible 'SWIP-14' subtitle next to the page
title (user-facing references to SWIPs should not appear). The
.ins__sub CSS goes with it.
- router/index.ts: the per-layer placeholderTabs array was empty and
unused. Removed it + the dead .map() that consumed it + the now-
orphaned humanKey() helper.
- apps/ui/src/layer/LayerTabPlaceholder.vue: deleted (only caller was
the dead placeholderTabs map). Every layer sub-tab has its own
view component now.
---
.../src/features/operate/inspect/InspectView.vue | 2 -
apps/ui/src/layer/LayerTabPlaceholder.vue | 94 ----------------------
apps/ui/src/shell/router/index.ts | 24 +-----
3 files changed, 4 insertions(+), 116 deletions(-)
diff --git a/apps/ui/src/features/operate/inspect/InspectView.vue
b/apps/ui/src/features/operate/inspect/InspectView.vue
index a5be58d..4e61964 100644
--- a/apps/ui/src/features/operate/inspect/InspectView.vue
+++ b/apps/ui/src/features/operate/inspect/InspectView.vue
@@ -1142,7 +1142,6 @@ function scopeShort(scope: InspectScope): string {
<AdminFeatureWarning module="inspect" feature-label="Inspect" />
<header class="ins__header">
<h1 class="ins__h1">Inspect</h1>
- <span class="ins__sub">SWIP-14</span>
<div class="ins__spacer" />
<span v-if="catalogQuery.isFetching.value"
class="ins__refreshing">refreshing…</span>
<Btn @click="refreshEverything">refresh</Btn>
@@ -1580,7 +1579,6 @@ function scopeShort(scope: InspectScope): string {
.ins__header { display: flex; align-items: center; gap: 12px; }
.ins__h1 { margin: 0; font-family: var(--rr-font-ui); font-weight: 500;
font-size: 14px; color: var(--rr-heading); }
-.ins__sub { font-family: var(--rr-font-mono); font-size: 11.5px; color:
var(--rr-dim); }
.ins__spacer { flex: 1 1 auto; }
.ins__refreshing {
font-family: var(--rr-font-mono);
diff --git a/apps/ui/src/layer/LayerTabPlaceholder.vue
b/apps/ui/src/layer/LayerTabPlaceholder.vue
deleted file mode 100644
index dbbf887..0000000
--- a/apps/ui/src/layer/LayerTabPlaceholder.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<!--
- Licensed to the Apache Software Foundation (ASF) under one or more
- contributor license agreements. See the NOTICE file distributed with
- this work for additional information regarding copyright ownership.
- The ASF licenses this file to You 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.
--->
-<!--
- Placeholder body for per-layer tabs that haven't been built yet
- (Topology / Traces / Logs / Dashboards / Instances / Endpoints /
- Profiling / Events). Reads `?service=` from the URL so when an
- operator picks a service in the top selector zone, the placeholder
- reflects the scope they'd see once the phase ships.
--->
-<script setup lang="ts">
-import { computed } from 'vue';
-import { useSelectedService } from '@/layer/useSelectedService';
-
-defineProps<{ title: string; phase: string; note?: string }>();
-
-const { selectedId } = useSelectedService();
-const scoped = computed(() => selectedId.value !== null);
-</script>
-
-<template>
- <div class="sw-card layer-ph">
- <div class="kicker">Coming in {{ phase }}</div>
- <h2>{{ title }}</h2>
- <p v-if="note" class="note">{{ note }}</p>
- <p v-if="scoped" class="scope">
- When this view ships, the selected service
- <code>{{ selectedId }}</code>
- will scope the query automatically.
- </p>
- <p v-else class="scope muted">
- Pick a service from the selector above to scope this view in advance.
- </p>
- </div>
-</template>
-
-<style scoped>
-.layer-ph {
- padding: 20px 24px;
- margin-top: 4px;
-}
-.kicker {
- font-size: 10px;
- text-transform: uppercase;
- letter-spacing: 0.1em;
- color: var(--sw-accent);
- margin-bottom: 8px;
-}
-.layer-ph h2 {
- margin: 0 0 6px;
- font-size: 16px;
- font-weight: 600;
- color: var(--sw-fg-0);
- letter-spacing: -0.02em;
-}
-.note {
- margin: 0 0 12px;
- font-size: 12px;
- color: var(--sw-fg-2);
- line-height: 1.5;
-}
-.scope {
- margin: 0;
- font-size: 11.5px;
- color: var(--sw-fg-1);
- line-height: 1.5;
- border-top: 1px dashed var(--sw-line);
- padding-top: 10px;
-}
-.scope.muted {
- color: var(--sw-fg-3);
-}
-.scope code {
- font-family: var(--sw-mono);
- font-size: 10.5px;
- background: var(--sw-bg-2);
- padding: 1px 4px;
- border-radius: 3px;
- color: var(--sw-fg-1);
-}
-</style>
diff --git a/apps/ui/src/shell/router/index.ts
b/apps/ui/src/shell/router/index.ts
index e1947e5..2b753da 100644
--- a/apps/ui/src/shell/router/index.ts
+++ b/apps/ui/src/shell/router/index.ts
@@ -20,23 +20,15 @@ import { pushEvent } from '@/controls/eventLog';
const placeholder = () => import('@/shell/PlaceholderView.vue');
-function humanKey(k: string): string {
- return k.replace(/[-_]/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
-}
-
// Layer sub-routes nest under a single LayerShell route so every tab
// shares the header KPI strip + cap-driven tab navigation. The shell
// reads `:layerKey` from the URL and pulls layer config / live data.
// Sub-route components fill the tab body via a nested router-view.
+// The canonical landing is `/service` — that's the widget-grid view
+// operators see when they click a layer. Every layer sub-tab now
+// has its own dedicated component; the earlier `placeholderTabs`
+// array (for tabs awaiting their per-page treatment) is gone.
function layerRoute(): RouteRecordRaw {
- // Per-layer sub-routes that still render generic placeholders until
- // their phases land. The canonical landing is `/service` — that's
- // the widget-grid view operators see when they click a layer.
- // Tabs that still don't have a per-scope dashboard set. Topology +
- // dependency + logs need their own page treatments (Phase 4 / 5);
- // their JSON template `components.*` flag still gates the sidebar
- // entry, this just keeps the URL routing legible.
- const placeholderTabs: { path: string; label: string; phase: string }[] = [];
return {
path: 'layer/:layerKey',
component: () => import('@/layer/LayerShell.vue'),
@@ -109,14 +101,6 @@ function layerRoute(): RouteRecordRaw {
path: 'traces',
redirect: (to) => ({ path: `/layer/${to.params.layerKey}/trace`,
query: to.query }),
},
- ...placeholderTabs.map<RouteRecordRaw>((f) => ({
- path: f.path,
- component: () => import('@/layer/LayerTabPlaceholder.vue'),
- props: (r) => ({
- title: `${humanKey(String(r.params.layerKey))} · ${f.label}`,
- phase: f.phase,
- }),
- })),
],
};
}
