@shortlink-org/portolan 0.3.0 → 0.4.0

package/src/components/DeploymentRows.tsx

@@ -0,0 +1,131 @@
+// Where a service runs, one row per Application the deployer lists for it.
+//
+// The environment is the row's identity: it is what a reader scans for -
+// "is it in prod yet" - and what the snapshot groups by. The revision is the
+// answer to the next question, "which commit", and is a link to the commit
+// on the forge when it is one; a chart version is not, and is shown as it
+// is. The application link opens the deployer's own page, which is where
+// health and sync live: they move without a commit and are not kept here.
+
+import { ExternalLink } from "lucide-react";
+import type { Deployment } from "../catalog";
+import { deploymentBasis } from "../catalog";
+import { driftLines } from "../lib/deployment-drift";
+import { Ident } from "./Ident";
+import { RowActions } from "./RowActions";
+
+/** The commit on the forge, when the revision is one and the repository is known. */
+function commitHref(deployment: Deployment): string | null {
+  if (!deployment.repo || !/^[0-9a-f]{40}$/.test(deployment.revision)) {
+    return null;
+  }
+  const repo = `https://${deployment.repo}`;
+  const view = repo.toLowerCase().includes("gitlab") ? "/-/commit/" : "/commit/";
+  return `${repo}${view}${deployment.revision}`;
+}
+
+/** A commit shortened the way `git log --oneline` shortens it; anything else whole. */
+function shortRevision(revision: string): string {
+  return /^[0-9a-f]{40}$/.test(revision) ? revision.slice(0, 7) : revision;
+}
+
+function DeploymentRow({ deployment }: { deployment: Deployment }) {
+  const href = commitHref(deployment);
+  const where = [deployment.cluster, deployment.namespace]
+    .filter(Boolean)
+    .join(" / ");
+  return (
+    <div className="row items-start px-2 py-1.5">
+      <span className="chip" title="the environment the application is placed in">
+        {deployment.environment}
+      </span>
+      <span className="mono text-muted" title="cluster / namespace">
+        {where}
+      </span>
+      <div className="min-w-0">
+        <span className="inline-flex flex-wrap items-center gap-x-2 gap-y-1">
+          {deployment.revision ? (
+            href ? (
+              <a
+                href={href}
+                target="_blank"
+                rel="noreferrer"
+                className="mono text-ink hover:underline"
+                title={`${deployment.revision} on the forge`}
+              >
+                {shortRevision(deployment.revision)}
+              </a>
+            ) : (
+              <Ident value={deployment.revision}>
+                {shortRevision(deployment.revision)}
+              </Ident>
+            )
+          ) : (
+            <span className="text-muted">not synced yet</span>
+          )}
+          {deployment.targetRevision ? (
+            <span className="text-muted" title="what the application tracks">
+              tracks {deployment.targetRevision}
+            </span>
+          ) : null}
+          {deployment.tool ? (
+            <span className="chip mono">{deployment.tool}</span>
+          ) : null}
+          {/* Who said so, when only the tree has: what should run, with
+              nothing yet saying it does. A row both spoke for says nothing
+              here - agreement is the ordinary case and needs no chip. */}
+          {deploymentBasis(deployment) === "manifest" ? (
+            <span
+              className="chip status-declared"
+              title="declared in the GitOps tree; the deployer has not been read for it"
+            >
+              declared
+            </span>
+          ) : null}
+          {/* The tree and the deployer disagree. The chip carries the
+              difference in words, so a reader does not have to open both. */}
+          {driftLines(deployment).length > 0 ? (
+            <span
+              className="chip status-unresolved"
+              title={driftLines(deployment).join("\n")}
+            >
+              drift
+            </span>
+          ) : null}
+        </span>
+        {deployment.images?.length ? (
+          <ul className="mt-0.5 flex flex-wrap gap-x-2 gap-y-0.5">
+            {deployment.images.map((image) => (
+              <li key={image}>
+                <Ident value={image} className="text-muted">
+                  {image}
+                </Ident>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </div>
+      <a
+        href={deployment.url}
+        target="_blank"
+        rel="noreferrer"
+        className="inline-flex items-center gap-1 rounded-control text-accent hover:underline"
+        title={`${deployment.name} in Argo CD, where its health and sync state are`}
+      >
+        {deployment.name}
+        <ExternalLink size={12} aria-hidden />
+      </a>
+      <RowActions copy={deployment.name} label={deployment.name} />
+    </div>
+  );
+}
+
+export function DeploymentRows({ deployments }: { deployments: Deployment[] }) {
+  return (
+    <div className="rows grid-cols-[auto_auto_1fr_auto_auto]">
+      {deployments.map((deployment) => (
+        <DeploymentRow key={deployment.id} deployment={deployment} />
+      ))}
+    </div>
+  );
+}

package/src/components/DocsLinks.test.tsx

@@ -0,0 +1,27 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { DocsLinksContent } from "./DocsLinks";
+
+describe("DocsLinks", () => {
+  it("searches Confluence by name and opens the Notion workspace", () => {
+    const markup = renderToStaticMarkup(
+      <DocsLinksContent
+        name="shop.oms"
+        confluence="https://acme.atlassian.net/wiki/spaces/ARCH"
+        notion="https://www.notion.so/acme"
+      />,
+    );
+    expect(markup).toContain("view in Confluence");
+    expect(markup).toContain(
+      'href="https://acme.atlassian.net/wiki/search?text=shop.oms&amp;spaces=ARCH"',
+    );
+    expect(markup).toContain("open Notion");
+    expect(markup).toContain('href="https://www.notion.so/acme"');
+  });
+
+  it("renders nothing before either integration is configured", () => {
+    expect(
+      renderToStaticMarkup(<DocsLinksContent name="shop.oms" confluence="" notion="" />),
+    ).toBe("");
+  });
+});

package/src/components/DocsLinks.tsx

@@ -0,0 +1,56 @@
+// The hand-off from a page to where its team writes: a Confluence search by
+// name, and the Notion workspace. Nothing until the reader has configured
+// either under Settings → Integrations; the values live in this browser.
+
+import { ExternalLink } from "lucide-react";
+import { confluenceSearchUrl, useConfluence } from "../lib/confluence";
+import { useNotion } from "../lib/notion";
+
+const LINK =
+  "inline-flex items-center gap-1 whitespace-nowrap rounded-control text-accent hover:underline";
+
+export function DocsLinksContent({
+  name,
+  confluence,
+  notion,
+}: {
+  /** What to search for: the service's or context's name. */
+  name: string;
+  confluence: string;
+  notion: string;
+}) {
+  const search = confluenceSearchUrl(confluence, name);
+  if (!search && !notion) return null;
+  return (
+    <>
+      {search ? (
+        <a
+          href={search}
+          target="_blank"
+          rel="noreferrer"
+          className={LINK}
+          title={`Search Confluence for ${name}`}
+        >
+          view in Confluence <ExternalLink size={12} aria-hidden />
+        </a>
+      ) : null}
+      {notion ? (
+        <a
+          href={notion}
+          target="_blank"
+          rel="noreferrer"
+          className={LINK}
+          title="Open the Notion workspace where the documentation lives"
+        >
+          open Notion <ExternalLink size={12} aria-hidden />
+        </a>
+      ) : null}
+    </>
+  );
+}
+
+export function DocsLinks({ name }: { name: string }) {
+  const confluence = useConfluence((state) => state.url);
+  const notion = useNotion((state) => state.url);
+  return <DocsLinksContent name={name} confluence={confluence} notion={notion} />;
+}

package/src/components/FieldTree.tsx

@@ -22,6 +22,7 @@ import type { Scope, Shape } from "../lib/shape";
 import { blockPath, enumPath } from "../routes";
 import { Ident } from "./Ident";
 import { KindIcon } from "./kind";
+import { RuleMarks } from "./RuleMarks";
 
 /** The words the type chip uses for what `parseType` found. */
 const CARDINALITY: Record<"many" | "map", string> = {
@@ -31,8 +32,9 @@ const CARDINALITY: Record<"many" | "map", string> = {
 
 /**
  * The type of a field, as a reader wants it: the raw spelling to copy, a
- * word for the wrapper it is in, and a way to the page of the shape it
- * names. Shared by the table cell and the tree row so both say it the same.
+ * word for the wrapper it is in, what the source says the value must
+ * satisfy, and a way to the page of the shape it names. Shared by the table
+ * cell and the tree row so both say it the same.
  */
 export function TypeCell({
   field,
@@ -70,6 +72,7 @@ export function TypeCell({
           optional
         </span>
       ) : null}
+      <RuleMarks field={field} />
       {page && shape ? (
         <Link
           to={page}

package/src/components/HTTPDestinationEvidence.tsx

@@ -4,7 +4,7 @@ import type { HTTPDestination } from "../catalog";
 export function HTTPDestinationEvidence({ destination: d }: { destination: HTTPDestination }) {
   const basis = d.resolution?.basis;
   const rows = [
-    ["Linked by", basis === "full-path" ? "Recovered full path" : basis === "exact-route" ? "Exact route" : basis === "unique-suffix" ? "Unique route suffix (heuristic)" : "Unresolved"],
+    ["Linked by", basis === "full-path" ? "Recovered full path" : basis === "exact-route" ? "Exact route" : basis === "unique-suffix" ? "Unique route suffix (heuristic)" : basis === "kubernetes-host" ? "Kubernetes Service host, from the manifests" : "Unresolved"],
     ["Call site", d.callSite],
     ["Endpoint expression", d.endpointExpression],
     ["Local path", d.localPath],

package/src/components/PluginIcon.tsx

@@ -0,0 +1,77 @@
+// The mark beside a plugin's name: the brand's own where the plugin reads one
+// technology the reader knows by its logo, a lucide glyph where it reads a
+// format or a convention that has none. Both are drawn at the size and weight
+// of the lucide row they sit in, which is what TechIcon's opened viewBox is for.
+
+import {
+  BookOpen,
+  Cloud,
+  CodeXml,
+  Database,
+  FileCode2,
+  FileSignature,
+  FolderGit2,
+  GitFork,
+  Globe,
+  Inbox,
+  MessageSquare,
+  Package,
+  PenLine,
+  Route,
+  Share2,
+  ShieldCheck,
+  SpellCheck,
+  Terminal,
+  Users,
+  Waves,
+  Workflow,
+} from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+
+import type { PluginGlyph, PluginIconSpec } from "../lib/plugins";
+import { techGlyph } from "../lib/tech";
+import { TechIcon } from "./TechIcon";
+
+const GLYPHS: Record<PluginGlyph, LucideIcon> = {
+  code: CodeXml,
+  contract: FileSignature,
+  message: MessageSquare,
+  database: Database,
+  cloud: Cloud,
+  repository: FolderGit2,
+  pen: PenLine,
+  shield: ShieldCheck,
+  fork: GitFork,
+  share: Share2,
+  inbox: Inbox,
+  "file-code": FileCode2,
+  package: Package,
+  waves: Waves,
+  workflow: Workflow,
+  users: Users,
+  globe: Globe,
+  terminal: Terminal,
+  book: BookOpen,
+  "spell-check": SpellCheck,
+  route: Route,
+};
+
+export function PluginIcon({
+  icon,
+  size = 14,
+  className = "",
+}: {
+  icon: PluginIconSpec;
+  size?: number;
+  className?: string;
+}) {
+  if ("brand" in icon) {
+    const glyph = techGlyph(icon.brand);
+    // A brand the mark list does not carry is a mistake the test catches; at
+    // run time it falls back to the generic code glyph rather than to nothing.
+    if (glyph) return <TechIcon glyph={glyph} size={size} className={className} />;
+    return <CodeXml size={size} aria-hidden className={`block shrink-0 ${className}`} />;
+  }
+  const Glyph = GLYPHS[icon.lucide];
+  return <Glyph size={size} aria-hidden className={`block shrink-0 ${className}`} />;
+}